Undo/Redo Functionality

dhtmlxGantt Chart allows you to undo/redo the made changes. To enable this functionality, you need to include the ext/dhtmlxgantt_undo.js extension on the page.

<script src="codebase/dhtmlxgantt.js"></script>
<script src="codebase/ext/dhtmlxgantt_undo.js"></script>  <link rel="stylesheet" href="codebase/dhtmlxgantt.css" type="text/css">

By default, both Undo and Redo features are enabled. To control the Undo/Redo functionality, make use of the undo / redo configuration options.

You can use Undo and Redo separately by switching off one of the options:

// just the Redo functionality is enabled
gantt.config.undo = false;
gantt.config.redo = true;

Related sample:  Undo/Redo changes in Gantt

Undo/Redo API

To revert the changes made in the Gantt Chart, use the undo method:

gantt.undo();

In order to redo the previously undone changes, make use of the redo method:

gantt.redo();

Getting the stack of stored Undo/Redo actions

All user actions in the Gantt Chart are implemented as arrays that contain sets of command objects. Gantt stores a stack of the most recently executed commands. The dhtmlxgantt_undo.js extension can make reverse operations out of them and execute them in Gantt.

When you need to undo or redo a command, the extension takes the most recent command object and executes the corresponding method.

To get the stack of the stored undo actions, use the getUndoStack method:

var stack = gantt.getUndoStack();

To return the stack of the stored redo actions, apply the getRedoStack method:

var stack = gantt.getRedoStack();

The returned stack is an array of the undo user actions. Each user action contains a set of commands. A command is an object with the following attributes:

  • type - (string) the type of a command: "add/remove/update"
  • entity - (string) the type of the object which was changed: "task" or "link"
  • value - (object) the changed task/link object
  • oldValue - (object) the task/link object before changes

Have a look at the example below:

The getUndoStack() method returns a stack with 2 undo user actions. The first action contains 3 commands, while the second one has 1 command.

Clearing the stack of stored Undo/Redo commands

There is a possibility to clear the stack of Undo/Redo commands via the related Gantt API.

To clear the the stack of the stored undo commands, use the clearUndoStack method:

gantt.clearUndoStack();

To clear the the stack of the stored redo commands, use the clearRedoStack method:

gantt.clearRedoStack();

Configuring the Undo functionality

There are several settings that help to adjust the Undo operation.

To specify the actions for which Undo will be applied, use the undo_actions parameter:

gantt.config.undo_actions = {
    update:"update",
    remove:"remove", // remove an item from the datastore
    add:"add"
};

To define how many steps can be reverted, apply the undo_steps parameter:

gantt.config.undo_steps = 10;

By default, it's possible to undo 10 actions.

You can also specify the entities that the undo operation will be aplied for in the undo_types parameter:

gantt.config.undo_types = {
    link:"link",
    task:"task"
};

The List of API Events

There is a set of helpful Undo/Redo-related events:

Back to top