Undo Redo in React Gantt component

14 Mar 202424 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.

To Undo Redo, inject the UndoRedo module into the Gantt component.

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.

index.jsx
index.tsx
index.html
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',
    child: 'subtasks'
  };
  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',
    child: 'subtasks'
  };
  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/27.2.2/material.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.

index.jsx
index.tsx
index.html
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',
    child: 'subtasks'
  };
  const editOptions = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true
  };
  const undoRedoStepsCount = 5;
  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'];
        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',
    child: 'subtasks'
  };
  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/27.2.2/material.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>

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.

index.jsx
index.tsx
index.html
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',
    child: 'subtasks'
  };
  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',
    child: 'subtasks'
  };
  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/27.2.2/material.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.

index.jsx
index.tsx
index.html
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',
    child: 'subtasks'
  };
  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 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 }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',
    child: 'subtasks'
  };
  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/27.2.2/material.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 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.

index.jsx
index.tsx
index.html
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',
    child: 'subtasks'
  };
  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 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, 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',
    child: 'subtasks'
  };
  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/27.2.2/material.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>