Undo Redo in React Gantt Chart Component

31 Jan 202624 minutes to read

The undo redo feature in the React Gantt Chart component 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, provided the UndoRedoService is injected. 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 UndoRedoService in the React module’s providers. The undoRedoActions property customizes supported actions, such as:

  • Edit: Reverts task field changes (e.g., StartDate, Duration) via dialog or taskbar drag, requiring EditService.
  • Delete: Restores deleted tasks, requiring EditService.
  • Add: Removes added tasks, requiring EditService.
  • Column Reorder: Reverts column reordering, requiring ReorderService.
  • Indent/Outdent: Reverts hierarchy changes, requiring EditService.
  • Row Drag And Drop: Restores row positions, requiring RowDDService.
  • Taskbar Drag And Drop: Reverts taskbar drags, requiring EditService.
  • 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 EditService or RowDDService 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
   const taskFields = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
   };
   const editOptions = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
   };
   const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
      'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
   const undoRedoActions = ['Edit', 'Delete'];
   return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} allowSorting={true} allowFiltering={true} allowRowDragAndDrop={true}
      editSettings={editOptions} showColumnMenu={true} enableUndoRedo={true} allowResizing={true} allowReordering={true} toolbar={toolbarOptions} undoRedoActions={undoRedoActions} height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
   </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, EditSettingsModel, GanttAction, ToolbarItem, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
   const taskFields: any = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
   };
   const editOptions: EditSettingsModel = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
   };
   const undoRedoActions: GanttAction[] = ['Edit', 'Delete'];
   const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
      'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
   return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} allowSorting={true} allowFiltering={true} allowRowDragAndDrop={true}
      editSettings={editOptions} showColumnMenu={true} enableUndoRedo={true} allowResizing={true} allowReordering={true} toolbar={toolbarOptions} undoRedoActions={undoRedoActions} height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
   </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const undoRedoStepsCount = 5;
  const undoRedoActions = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
    'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  return <GanttComponent
    dataSource={data}
    taskFields={taskFields}
    allowSelection={true}
    allowSorting={true}
    allowFiltering={true}
    allowRowDragAndDrop={true}
    undoRedoStepsCount={undoRedoStepsCount}
    editSettings={editOptions}
    showColumnMenu={true}
    enableUndoRedo={true}
    allowResizing={true}
    allowReordering={true}
    toolbar={toolbarOptions}
    undoRedoActions={undoRedoActions}
    height='450px'>
    <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, EditSettingsModel, GanttAction, ToolbarItem, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const undoRedoStepsCount: number = 5;
  const undoRedoActions: GanttAction[] = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
    'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  return <GanttComponent
    dataSource={data}
    taskFields={taskFields}
    allowSelection={true}
    allowSorting={true}
    allowFiltering={true}
    allowRowDragAndDrop={true}
    undoRedoStepsCount={undoRedoStepsCount}
    editSettings={editOptions}
    showColumnMenu={true}
    enableUndoRedo={true}
    allowResizing={true}
    allowReordering={true}
    toolbar={toolbarOptions}
    undoRedoActions={undoRedoActions}
    height='450px'>
    <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

This code allows reverting task edits (e.g., changing a task’s duration) or deletions, with up to 5 actions stored.

Programmatic Undo/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:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
  let gantt;
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
    'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  const undoRedoActions = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
    'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  function undo() {
    gantt.undo();
  }
  function redo() {
    gantt.redo();
  }
  return (<div>
    <ButtonComponent onClick={undo}>Undo</ButtonComponent>
    <ButtonComponent onClick={redo}>Redo</ButtonComponent>
    <GanttComponent
      dataSource={data}
      ref={g => gantt = g}
      taskFields={taskFields}
      allowSelection={true}
      allowSorting={true}
      allowFiltering={true}
      allowRowDragAndDrop={true}
      editSettings={editOptions}
      showColumnMenu={true}
      enableUndoRedo={true}
      allowResizing={true}
      allowReordering={true}
      toolbar={toolbarOptions}
      undoRedoActions={undoRedoActions}
      height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
    </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, EditSettingsModel, GanttAction, ToolbarItem, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
  let gantt: any;
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const undoRedoActions: GanttAction[] = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
    'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent',
    'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  function undo() {
    gantt.undo();
  }
  function redo() {
    gantt.redo();
  }
  return (<div>
    <ButtonComponent onClick={undo}>Undo</ButtonComponent>
    <ButtonComponent onClick={redo}>Redo</ButtonComponent>
    <GanttComponent
      dataSource={data}
      ref={g => gantt = g}
      taskFields={taskFields}
      allowSelection={true}
      allowSorting={true}
      allowFiltering={true}
      allowRowDragAndDrop={true}
      editSettings={editOptions}
      showColumnMenu={true}
      enableUndoRedo={true}
      allowResizing={true}
      allowReordering={true}
      toolbar={toolbarOptions}
      undoRedoActions={undoRedoActions}
      height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
    </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
  let gantt;
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const undoRedoActions = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  function getundocollection() {
    console.log(gantt.getUndoActions());
  }
  function getredocollection() {
    console.log(gantt.getRedoActions());
  }
  return (<div>
    <ButtonComponent onClick={getundocollection}>GetUndoCollection</ButtonComponent>
    <ButtonComponent onClick={getredocollection}>GetRedoCollection</ButtonComponent>
    <GanttComponent
      dataSource={data}
      ref={g => gantt = g}
      taskFields={taskFields}
      allowSelection={true}
      allowSorting={true}
      allowFiltering={true}
      allowRowDragAndDrop={true}
      editSettings={editOptions}
      showColumnMenu={true}
      enableUndoRedo={true}
      allowResizing={true}
      allowReordering={true}
      toolbar={toolbarOptions}
      undoRedoActions={undoRedoActions}
      height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
    </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, EditSettingsModel, GanttAction, ToolbarItem, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo, TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
  let gantt: GanttComponent;
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const undoRedoActions: GanttAction[] = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  function getundocollection() {
    console.log(gantt.getUndoActions());
  }
  function getredocollection() {
    console.log(gantt.getRedoActions());
  }
  return (<div>
    <ButtonComponent onClick={getundocollection}>GetUndoCollection</ButtonComponent>
    <ButtonComponent onClick={getredocollection}>GetRedoCollection</ButtonComponent>
    <GanttComponent
      dataSource={data}
      ref={g => gantt = g}
      taskFields={taskFields}
      allowSelection={true}
      allowSorting={true}
      allowFiltering={true}
      allowRowDragAndDrop={true}
      editSettings={editOptions}
      showColumnMenu={true}
      enableUndoRedo={true}
      allowResizing={true}
      allowReordering={true}
      toolbar={toolbarOptions}
      undoRedoActions={undoRedoActions}
      height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
    </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
  let gantt;
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const undoRedoActions = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  const toolbarOptions = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  function clearundocollection() {
    gantt.clearUndoCollection();
  }
  function clearredocollection() {
    gantt.clearRedoCollection();
  }
  return (<div>
    <ButtonComponent onClick={clearundocollection}>ClearUndoCollection</ButtonComponent>
    <ButtonComponent onClick={clearredocollection}>ClearRedoCollection</ButtonComponent>
    <GanttComponent
      dataSource={data}
      ref={g => gantt = g}
      taskFields={taskFields}
      allowSelection={true}
      allowSorting={true}
      allowFiltering={true}
      allowRowDragAndDrop={true}
      editSettings={editOptions}
      showColumnMenu={true}
      enableUndoRedo={true}
      allowResizing={true}
      allowReordering={true}
      toolbar={toolbarOptions}
      undoRedoActions={undoRedoActions}
      height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
    </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, EditSettingsModel, GanttAction, TaskFieldsModel, ToolbarItem, Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';
function App() {
  let gantt: GanttComponent;
  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const editOptions: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true
  };
  const undoRedoActions: GanttAction[] = ['Add', 'Edit', 'Delete', 'Search', 'Sorting', 'Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PreviousTimeSpan', 'NextTimeSpan', 'ColumnState'];
  const toolbarOptions: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'Indent', 'Outdent', 'PrevTimeSpan', 'NextTimeSpan', 'Undo', 'Redo'];
  function clearundocollection() {
    gantt.clearUndoCollection();
  }
  function clearredocollection() {
    gantt.clearRedoCollection();
  }
  return (<div>
    <ButtonComponent onClick={clearundocollection}>ClearUndoCollection</ButtonComponent>
    <ButtonComponent onClick={clearredocollection}>ClearRedoCollection</ButtonComponent>
    <GanttComponent
      dataSource={data}
      ref={g => gantt = g}
      taskFields={taskFields}
      allowSelection={true}
      allowSorting={true}
      allowFiltering={true}
      allowRowDragAndDrop={true}
      editSettings={editOptions}
      showColumnMenu={true}
      enableUndoRedo={true}
      allowResizing={true}
      allowReordering={true}
      toolbar={toolbarOptions}
      undoRedoActions={undoRedoActions}
      height='450px'>
      <Inject services={[Toolbar, Selection, Edit, Filter, Sort, RowDD, ColumnMenu, Reorder, Resize, UndoRedo]} />
    </GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

See also