Hello @Rizwan,
Yes, you can implement undo/redo functionality using the DHTMLX Gantt Undo extension and coordinating the undo/redo actions with your backend API.
First, you need to enable the undo plugin:
gantt.plugins({ undo: true });
It’s possible to configure which actions you want to track. For example:
gantt.config.undo_actions = {
add: "add",
update: "update",
remove: "remove",
move: "move"
};
You can also specify the entities that the undo operation will be applied for in the gantt.config.undo_types parameter:
gantt.config.undo_types = {
link:"link",
task:"task"
};
https://docs.dhtmlx.com/gantt/desktop__undo_redo.html#configuringtheundofunctionality
Also, you can limit how many undo steps are stored (gantt.config.undo_steps).
When you update tasks via code (not through user UI), call gantt.ext.undo.saveState(id, "task") before changing anything, then call gantt.updateTask() after the change. This way, the “before” state is saved and can be undone later.
https://docs.dhtmlx.com/gantt/desktop__undo_redo.html#undoingredoingchangesmadefromcode
It’s also possible to get the stack of the stored undo and redo actions, and clear them if needed: Undo/Redo Functionality Gantt Docs.
Here’s an example of how you can copy, restore, or reset the internal undo/redo stack: DHTMLX Snippet Tool.
Gantt doesn’t automatically bind Ctrl+Z / Ctrl+Y to undo/redo actions, so you need to add this manually:
document.addEventListener("keydown", function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === "z") {
gantt.undo();
}
if ((e.ctrlKey || e.metaKey) && e.key === "y") {
gantt.redo();
}
});
Here’s an example: DHTMLX Snippet Tool.
To keep Gantt state and database in sync and send API requests to the backend, you can listen to events like onAfterUndo and onAfterRedo: Undo/Redo Functionality Gantt Docs.
In the undo/redo handlers, you can iterate over the commands and send the appropriate API requests (create, update, delete) for tasks and links. Based on the command objects (which include type, entity, value, oldValue), send the appropriate API request to your backend.
