Undo Redo in EJ2 JavaScript Gantt Chart Control

2 Feb 202624 minutes to read

The undo redo feature in the EJ2 JavaScript Gantt Chart control allows users to revert or reapply actions like task edits, deletions, or dependency changes, enhancing project management by correcting mistakes efficiently. Enabled via the enableUndoRedo property, it supports actions such as editing task details, dragging taskbars, or reordering columns. For example, undoing a task duration change restores the original timeline, while redoing it reapplies the edit. The undoRedoActions property specifies which actions to track (e.g., Edit, Delete), defaulting to a comprehensive set including sorting, filtering, and zooming. The undoRedoStepsCount property limits the action history, defaulting to 10, with older actions removed as new ones are added. This feature ensures history management for complex projects with hierarchical tasks or frequent updates.

Configure undo redo

Enable undo redo by setting enableUndoRedo to true and injecting UndoRedo. The undoRedoActions property customizes supported actions, such as:

  • Edit: Reverts task field changes (e.g., StartDate, Duration) via dialog or taskbar drag, requiring Edit.
  • Delete: Restores deleted tasks, requiring Edit.
  • Add: Removes added tasks, requiring Edit.
  • Column Reorder: Reverts column reordering, requiring Reorder.
  • Indent/Outdent: Reverts hierarchy changes, requiring Edit.
  • Row Drag And Drop: Restores row positions, requiring RowDD.
  • Taskbar Drag And Drop: Reverts taskbar drags, requiring Edit.
  • Sorting, Filtering, Search: Reverts grid operations, requiring respective services.
  • Zoom In, Zoom Out, Zoom To Fit: Reverts timeline zoom changes.
  • ColumnState: Restores column visibility.
  • Previous Time Span, Next Time Span: Reverts timeline navigation.

The undoRedoStepsCount property sets the action history limit (e.g., 5); setting it to 0 disables undo/redo. Ensure dependencies like Edit or RowDD are injected for actions like Edit or RowDragAndDrop.

Configure the feature set for undo redo actions

By default, all the gantt features listed in the below table will be restored for undo and redo actions. However, you have the option to specify only the required actions to be restored using undoRedoActions property.

Built-in Undo Redo Items Actions
Edit Undo redo actions can be performed for edited record.
Delete Undo redo actions can be performed for deleted record.
Add Undo redo actions can be performed for newly added record.
ColumnReorder Undo redo actions can be performed for reordered column.
Indent Undo redo actions can be performed for indented record.
Outdent Undo redo actions can be performed for outdented record.
ColumnResize Undo redo actions can be performed for resized column.
Sorting Undo redo actions can be performed for sorted column.
Filtering Undo redo actions can be performed for filtered record.
Search Undo redo actions can be performed for searched value.
ZoomIn Undo redo actions can be performed for zoomIn action.
ZoomOut Undo redo actions can be performed for zoomOut action.
ZoomToFit Undo redo actions can be performed for zoomToFit action.
ColumnState Undo redo actions can be performed for hided or shown columns.
RowDragAndDrop Undo redo actions can be performed for row drag and drop.
TaskbarDragAndDrop Undo redo actions can be performed for taskbar drag and drop.
PreviousTimeSpan Undo redo actions can be performed for previous time span acton.
NextTimeSpan Undo redo actions can be performed for next time span action.

In the following code example, Edit and Delete actions are specified in undoRedoActions property.

ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar, ej.gantt.Selection, ej.gantt.Filter,ej.gantt.Sort,ej.gantt.RowDD,ej.gantt.ColumnMenu,ej.gantt.Reorder,ej.gantt.Resize,ej.gantt.UndoRedo);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    allowSorting: true,
    allowFiltering: true,
    enableUndoRedo: true,
    showColumnMenu: true,
    allowResizing: true,
    allowReordering: true,
    allowRowDragAndDrop: true,
    undoRedoActions: ['Edit', 'Delete'],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    }
     });
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Configuring the storage step count for undo and redo actions

You can specify the number of actions to be stored for undo and redo operations using the undoRedoStepsCount property.

By default, the value of undoRedoStepsCount is set to 10.

When the number of actions performed exceeds the undoRedoStepsCount, the oldest action in the undo collection is removed, and the latest action performed is added to the collection. This ensures that the number of stored actions does not exceed the specified limit, maintaining efficient memory usage.

In the following example, undoRedoStepsCount value is set to 5. This code allows reverting task edits (e.g., changing a task’s duration) or deletions, with up to 5 actions stored.

ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar, ej.gantt.Selection, ej.gantt.Filter,ej.gantt.Sort,ej.gantt.RowDD,ej.gantt.ColumnMenu,ej.gantt.Reorder,ej.gantt.Resize,ej.gantt.UndoRedo);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    allowSorting: true,
    allowFiltering: true,
    enableUndoRedo: true,
    showColumnMenu: true,
    allowResizing: true,
    allowReordering: true,
    allowRowDragAndDrop: true,
    undoRedoStepsCount: 5,
    undoRedoActions: ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PreviousTimeSpan', 'NextTimeSpan','ColumnState'],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    }
     });
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
          <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Programmatic undo and redo in Gantt Chart

Programmatic control over undo redo is achieved using methods like undo to revert actions, redo to reapply them.

The following example triggers undo and redo via external buttons:

ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar, ej.gantt.Selection, ej.gantt.Filter,ej.gantt.Sort,ej.gantt.RowDD,ej.gantt.ColumnMenu,ej.gantt.Reorder,ej.gantt.Resize,ej.gantt.UndoRedo);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    allowSorting: true,
    allowFiltering: true,
    enableUndoRedo: true,
    showColumnMenu: true,
    allowResizing: true,
    allowReordering: true,
    allowRowDragAndDrop: true,
    undoRedoActions: ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PreviousTimeSpan', 'NextTimeSpan','ColumnState'],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PrevTimeSpan', 'NextTimeSpan'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    }
     });
ganttChart.appendTo('#Gantt');

milestone

document.getElementById('redo').addEventListener('click', () => {
    var ganttObj= document.getElementById('Gantt').ej2_instances[0];
    ganttObj.redo();
});
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="button">
            <button id="undo">Undo</button>
            <button id="redo">Redo</button>
        </div>
        <div id="container">            
            <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Retrieve undo and redo stack collection

By default, when an undo or redo action is performed, the actions are stored in an array collection. To retrieve the undo and redo stack array collections, you can use the getUndoActions and getRedoActions methods.

The following code example demonstrates how to retrieve the undo and redo collection using method by clicking the external button.

ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar, ej.gantt.Selection, ej.gantt.Filter,ej.gantt.Sort,ej.gantt.RowDD,ej.gantt.ColumnMenu,ej.gantt.Reorder,ej.gantt.Resize,ej.gantt.UndoRedo);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    allowSorting: true,
    allowFiltering: true,
    enableUndoRedo: true,
    showColumnMenu: true,
    allowResizing: true,
    allowReordering: true,
    allowRowDragAndDrop: true,
    undoRedoActions: ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PreviousTimeSpan', 'NextTimeSpan','ColumnState'],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    }
     });
ganttChart.appendTo('#Gantt');

var getundocollection= new ej.buttons.Button();
getundocollection.appendTo('#getundocollection');

var getredocollection= new ej.buttons.Button();
getredocollection.appendTo('#getredocollection');

document.getElementById('getundocollection').addEventListener('click', () => {
    var ganttObj= document.getElementById('Gantt').ej2_instances[0];
    console.log(ganttObj.getUndoActions());
});

document.getElementById('getredocollection').addEventListener('click', () => {
    var ganttObj= document.getElementById('Gantt').ej2_instances[0];
    console.log(ganttObj.getRedoActions());
});
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="button">
            <button id="getundocollection">GetUndoCollection</button>
            <button id="getredocollection">GetRedoCollection</button>
        </div>
        <div id="container">
            <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Clear undo and redo collection

At any point, you can clear the undo and redo collections using clearUndoCollection and clearRedoCollection methods. This allows you to reset the undo and redo stacks as needed during runtime.

The following code example demonstrates how to clear the undo and redo collection using method by clicking the external button.

ej.gantt.Gantt.Inject(ej.gantt.Edit,ej.gantt.Toolbar, ej.gantt.Selection, ej.gantt.Filter,ej.gantt.Sort,ej.gantt.RowDD,ej.gantt.ColumnMenu,ej.gantt.Reorder,ej.gantt.Resize,ej.gantt.UndoRedo);

var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    allowSorting: true,
    allowFiltering: true,
    enableUndoRedo: true,
    showColumnMenu: true,
    allowResizing: true,
    allowReordering: true,
    allowRowDragAndDrop: true,
    undoRedoActions: ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PreviousTimeSpan', 'NextTimeSpan','ColumnState'],
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
    'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
    editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    }
     });
ganttChart.appendTo('#Gantt');

var clearundocollection= new ej.buttons.Button();
clearundocollection.appendTo('#clearundocollection');

var clearredocollection = new ej.buttons.Button();
clearredocollection.appendTo('#clearredocollection');

document.getElementById('clearundocollection').addEventListener('click', () => {
    var ganttObj= document.getElementById('Gantt').ej2_instances[0];
    ganttObj.clearUndoCollection();
});

document.getElementById('clearredocollection').addEventListener('click', () => {
    var ganttObj= document.getElementById('Gantt').ej2_instances[0];
    ganttObj.clearRedoCollection();
});
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="button">
            <button id="clearundocollection">ClearUndoCollection</button>
            <button id="clearredocollection">ClearRedoCollection</button>
        </div>
        <div id="container">
            <div id="Gantt"></div>
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

See also