Hello DayPilot Support Team,
We are experiencing an error in DayPilot Scheduler while performing drag-and-drop operations on rows that contain a large number of events (especially frozen rows).
Error: "Cannot read properties of null (reading 'removeChild')"
Scenario:
- We attempt to reduce 95% of events in a frozen row ("UNCOVERED") during drag for better visibility.
- We directly filter out events from the scheduler’s events array during the drag operation.
- This causes a DOM error in DayPilot as it tries to move or remove elements that no longer exist.
Here is the relevant code snippet we are using:
export function onEventMovingHelper(context: any, args: any) {
if (args.e.data.skilL_ID === "0") return;
const draggedEventId = args.e.data.id;
if (args.e.data.resource === "UNCOVERED" && !context.uncoveredFiltered) {
context.uncoveredBackup = context.filteredEvents.filter(ev =>
ev.resource === "UNCOVERED" && ev.id !== draggedEventId
);
const keepCount = Math.ceil(context.uncoveredBackup.length * 0.05);
const eventsToKeep = context.uncoveredBackup.slice(0, keepCount);
context.filteredEvents = context.filteredEvents.filter(ev =>
ev.resource !== "UNCOVERED" || ev.id === draggedEventId || eventsToKeep.includes(ev)
);
context.uncoveredFiltered = true;
context.config.events = context.filteredEvents;
context.scheduler.control.update(); // This line triggers the removeChild error
}
}
We would like guidance on:
1. Recommended way to temporarily hide or filter events during drag without causing DOM errors.
2. Whether there is a built-in DayPilot method to safely handle drag/drop with filtered or frozen rows.
Thank you for your support.
Best regards,
[Your Name]
[Your Company]