Undo Redo in Gantt component

14 Mar 202412 minutes to read

The Undo feature enables users to revert the most recent action performed in the Gantt Chart. It helps undo changes made to tasks, dependencies, or other actions within the Gantt Chart.

The Redo feature can reapply an action that was previously undone using the Undo feature. This allows users to revert their decision to undo an action.

The undo redo feature can be enabled in Gantt by using the EnableUndoRedo property.

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.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableUndoRedo="true" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Search", "ZoomIn", "ZoomOut", "ZoomToFit","Indent","Outdent", 
    "PrevTimeSpan", "NextTimeSpan","Undo","Redo" })" allowSorting="true" allowFiltering="true" showColumnMenu="true" allowResizing="true" allowReordering="true" allowRowDragAndDrop="true"
    undoRedoActions="@(new List<string>() { "Edit","Delete"})">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
         endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-gantt-editsettings>
</ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

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.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableUndoRedo="true" undoRedoStepsCount="5"
    toolbar="@(new List<string>() { " Add", "Edit" , "Update" , "Delete" , "Search" , "ZoomIn" , "ZoomOut" , "ZoomToFit"
    ,"Indent","Outdent", "PrevTimeSpan" , "NextTimeSpan" ,"Undo","Redo" })" allowSorting="true" allowFiltering="true"
    showColumnMenu="true" allowResizing="true" allowReordering="true" allowRowDragAndDrop="true"
    undoRedoActions="@(new List<string>() { "
    Sorting","Add","ColumnReorder","ColumnResize","ColumnState","Delete","Edit","Filtering","Indent","Outdent","NextTimeSpan","PreviousTimeSpan","RowDragAndDrop","Search","ZoomIn", "ZoomOut"
    , "ZoomToFit" })">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration"
        progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-gantt-editsettings>
</ejs-gantt>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Perform undo redo actions programatically

You can perform undo and redo actions programatically using undo and redo methods.

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

<ejs-button id="Undo" content="Undo" cssClass="e-primary"></ejs-button>
<ejs-button id="Redo" content="Redo" cssClass="e-primary"></ejs-button>

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableUndoRedo="true" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Search", "ZoomIn", "ZoomOut", "ZoomToFit","Indent","Outdent", 
    "PrevTimeSpan", "NextTimeSpan","Undo","Redo" })" allowSorting="true" allowFiltering="true" showColumnMenu="true" allowResizing="true" allowReordering="true" allowRowDragAndDrop="true"
    undoRedoActions="@(new List<string>() { "Sorting","Add","ColumnReorder","ColumnResize","ColumnState","Delete","Edit","Filtering","Indent","Outdent","NextTimeSpan","PreviousTimeSpan","RowDragAndDrop","Search","ZoomIn", "ZoomOut", "ZoomToFit"})">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
         endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-gantt-editsettings>
</ejs-gantt>

<script>
        document.getElementById('Undo').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.undo();
        });
        document.getElementById('Redo').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.redo();
        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

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.

<ejs-button id="GetUndoCollection" content="Get Undo Collection" cssClass="e-primary"></ejs-button>
<ejs-button id="GetRedoCollection" content="Get Redo Collection" cssClass="e-primary"></ejs-button>

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableUndoRedo="true" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Search", "ZoomIn", "ZoomOut", "ZoomToFit","Indent","Outdent", 
    "PrevTimeSpan", "NextTimeSpan","Undo","Redo" })" allowSorting="true" allowFiltering="true" showColumnMenu="true" allowResizing="true" allowReordering="true" allowRowDragAndDrop="true"
    undoRedoActions="@(new List<string>() { "Sorting","Add","ColumnReorder","ColumnResize","ColumnState","Delete","Edit","Filtering","Indent","Outdent","NextTimeSpan","PreviousTimeSpan","RowDragAndDrop","Search","ZoomIn", "ZoomOut", "ZoomToFit"})">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
         endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-gantt-editsettings>
</ejs-gantt>

<script>
        document.getElementById('GetUndoCollection').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            console.log(ganttObj.getUndoActions());
        });
        document.getElementById('GetRedoCollection').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            console.log(ganttObj.getRedoActions());
        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Clear undo and redo collection

At any point, you can clear the undo and redo collections using the 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.

<ejs-button id="ClearUndoCollection" content="Clear Undo Collection" cssClass="e-primary"></ejs-button>
<ejs-button id="ClearRedoCollection" content="Clear Redo Collection" cssClass="e-primary"></ejs-button>

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" enableUndoRedo="true" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Search", "ZoomIn", "ZoomOut", "ZoomToFit","Indent","Outdent", 
    "PrevTimeSpan", "NextTimeSpan","Undo","Redo" })" allowSorting="true" allowFiltering="true" showColumnMenu="true" allowResizing="true" allowReordering="true" allowRowDragAndDrop="true"
    undoRedoActions="@(new List<string>() { "Sorting","Add","ColumnReorder","ColumnResize","ColumnState","Delete","Edit","Filtering","Indent","Outdent","NextTimeSpan","PreviousTimeSpan","RowDragAndDrop","Search","ZoomIn", "ZoomOut", "ZoomToFit"})">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
         endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-gantt-editsettings>
</ejs-gantt>

<script>
        document.getElementById('ClearUndoCollection').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.clearUndoCollection();
        });
        document.getElementById('ClearRedoCollection').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.clearRedoCollection();
        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}