Need to be able to handle onAfterTaskDrag events in bulk

Gantt
#1

I have the pro version and enabled multiselect.

I have event listeners hooked up to onAfterTaskDrag events which works fine. But if I select many events I get loads of events.

My logic does some heavy (server-side) calls for each event. I need to be able to handle all those events collectively.

#2

Hello,

There’s no built-in way for this, but you can achieve it manually. Here’s how it might look:

  • track which tasks are selected and which ones were moved during dragging:
const selectedTasksSet = new Set();
const movedTasksSet = new Set();

gantt.attachEvent("onTaskMultiSelect", (id, state) => {
	if (state) {
		selectedTasksSet.add(id);
	} else {
		selectedTasksSet.delete(id);
	}
});
  • after each drag, add the task to the set of moved tasks. When all selected tasks are dragged, trigger a bulk update:
gantt.attachEvent("onAfterTaskDrag", (id) => {
	if (!movedTasksSet.has(id)) {
		movedTasksSet.add(id);

		if (
			movedTasksSet.size === selectedTasksSet.size &&
			[...movedTasksSet].every(taskId => selectedTasksSet.has(taskId))
		) {
			sendChanges();
		}

		setTimeout(() => {
			movedTasksSet.clear();
		}, 0);
	}
});
  • the sendChanges function gathers all marked tasks and sends them together:
function sendChanges() {
	const updatedTasks = [];

	gantt.eachTask((task) => {
		if (task.$dataprocessor_class) {
			const taskClone = gantt.copy(task);
			taskClone.start_date = gantt.date.date_to_str(gantt.config.date_format)(taskClone.start_date);
			taskClone.end_date = gantt.date.date_to_str(gantt.config.date_format)(taskClone.end_date);
			updatedTasks.push(taskClone);
		}
	});

	if (updatedTasks.length) {
		gantt.ajax.post({
			url: "/api", // your endpoint
			data: {
				data: updatedTasks
			}
		}).then(() => {
			gantt.eachTask(task => {
				if (task.$dataprocessor_class) {
					task.$dataprocessor_class = null;
				}
			});
			gantt.render();
		});
	}
}

Here is a full example: DHTMLX Snippet Tool