HelpBot Assistant

How can I help you?

State Persistence in React Gantt Chart Component

12 Mar 202624 minutes to read

The Syncfusion® React Gantt Chart component supports state management to retain its configuration and data after a browser refresh during the same session.

To enable this, set the enablePersistence property to true. Once enabled, the component saves its state in the browser’s localStorage and restores it automatically after page reloads.

Restore initial Gantt state

The Syncfusion® React Gantt Chart component provides options to reset its state, reverting all interactions and configurations to the original setup. This is useful for clearing filters, sorting, and column arrangements, even when enablePersistence is enabled.

Changing component ID

To reset the Gantt to its default state, update the component ID. This initializes the component as a new instance, restoring its original configuration.

Here is an example code to change the component ID dynamically to restore initial Gantt state.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Edit,
  Toolbar,
  Inject
} 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 editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    'Search', 'ExpandAll', 'CollapseAll',
    'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings = { columnIndex: 2 };

  return (
    <div>
      <button id="restore" style=
        onClick={() => { location.reload(); }}>
        Restore
      </button>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowSorting={true}
        allowFiltering={true}
        dataSource={data}
        taskFields={taskFields}
        editSettings={editSettings}
        toolbar={toolbar}
        enablePersistence={true}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" format="yMd" textAlign="Right" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
} from '@syncfusion/ej2-react-gantt';
import {
  EditSettingsModel,
  TaskFieldsModel,
  ToolbarItem,
  SplitterSettingsModel,
  Edit,
  Toolbar,
  Inject
} from '@syncfusion/ej2-react-gantt';

import { data } from './datasource';
function App() {

  const taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar: ToolbarItem[] = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    'Search', 'ExpandAll', 'CollapseAll',
    'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings: SplitterSettingsModel = { columnIndex: 2 };

  return (
    <div>
      <button id="restore" style=
        onClick={() => { location.reload(); }}>
        Restore
      </button>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowSorting={true}
        allowFiltering={true}
        dataSource={data}
        taskFields={taskFields}
        editSettings={editSettings}
        toolbar={toolbar}
        enablePersistence={true}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" format="yMd" textAlign="Right" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar]} />
      </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/33.1.44/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>
</head>

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

</html>

Clearing local storage

Clearing the browser’s local storage associated with the Gantt Chart component removes all persisted data, allowing it to load with its initial settings.

Here is an example code on how to clear local storage to retain its default state.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Edit,
  Toolbar,
  Inject
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    'ExpandAll', 'CollapseAll',
    'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings = { columnIndex: 2 };

  function restoreClick() {
    window.localStorage.setItem("ganttTaskDetails", "");
    document.getElementById("TaskDetails").remove();
    location.reload();
  }

  return (
    <div>
      <button
        style=
        id="restore"
        onClick={restoreClick}>
        Restore
      </button>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowFiltering={true}
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        enablePersistence={true}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective
} from '@syncfusion/ej2-react-gantt';
import {
  TaskFieldsModel,
  EditSettingsModel,
  ToolbarItem,
  SplitterSettingsModel,
  Edit,
  Toolbar,
  Inject
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar: ToolbarItem[] = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    'ExpandAll', 'CollapseAll',
    'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings: SplitterSettingsModel = { columnIndex: 2 };

  function restoreClick() {
    window.localStorage.setItem("ganttTaskDetails", "");
    (document.getElementById("TaskDetails") as any).remove();
    location.reload();
  }

  return (
    <div>
      <button
        style=
        id="restore"
        onClick={restoreClick}>
        Restore
      </button>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowFiltering={true}
        dataSource={data}
        taskFields={taskSettings}
        editSettings={editSettings}
        toolbar={toolbar}
        enablePersistence={true}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar]} />
      </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/33.1.44/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>
</head>

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

</html>

Restore to previous state

The Syncfusion® React Gantt Chart component allows saving and restoring its state using local storage, ensuring retention of configurations like column order, sorting, and filtering.

To implement this functionality, extract the current state using getPersistData, store it with setItem, retrieve it via getItem, and apply it using setProperties to restore the saved configuration.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Inject
} from '@syncfusion/ej2-react-gantt';
import {
  Edit,
  Toolbar,
  Sort
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search',
    'ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings = { columnIndex: 2 };

  const sortSettings = {
    columns: []
  };

  let message = "";

  function save() {
    const ganttObj = document.querySelector('#TaskDetails').ej2_instances[0];
    const persistData = ganttObj.getPersistData();
    if (persistData) {
      window.localStorage.setItem("ganttTaskDetails", persistData);
      message = "Gantt state saved.";
      updateMessage();
    }
  }

  function restore() {
    const value = window.localStorage.getItem("ganttTaskDetails");
    const ganttObj = document.querySelector('#TaskDetails').ej2_instances[0];

    if (value) {
      const state = JSON.parse(value);
      ganttObj.treeGrid.setProperties(state);
      message = "Previous Gantt state restored.";
    } else {
      message = "No saved state found.";
    }
    updateMessage();
  }

  function updateMessage() {
    const msg = document.getElementById("msg");
    if (msg) msg.innerHTML = message;
  }

  return (
    <div>
      <button className="e-success" style= onClick={save}>
        Save
      </button>
      <button className="e-danger" onClick={restore}>
        Restore
      </button>

      <div
        id="msg"
        style=>
      </div>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowSorting={true}
        allowFiltering={true}
        editSettings={editSettings}
        toolbar={toolbar}
        dataSource={data}
        taskFields={taskSettings}
        enablePersistence={true}
        splitterSettings={splitterSettings}
        sortSettings={sortSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar, Sort]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Inject
} from '@syncfusion/ej2-react-gantt';
import {
  TaskFieldsModel,
  EditSettingsModel,
  ToolbarItem,
  SplitterSettingsModel,
  SortSettingsModel,
  Edit,
  Toolbar,
  Sort
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar: ToolbarItem[] = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search',
    'ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings: SplitterSettingsModel = { columnIndex: 2 };

  const sortSettings: SortSettingsModel = {
    columns: []
  };

  let message: string = "";

  function save() {
    const ganttObj: any = (document.querySelector('#TaskDetails') as any).ej2_instances[0];
    const persistData = ganttObj.getPersistData();
    if (persistData) {
      window.localStorage.setItem("ganttTaskDetails", persistData);
      message = "Gantt state saved.";
      updateMessage();
    }
  }

  function restore() {
    const value = window.localStorage.getItem("ganttTaskDetails");
    const ganttObj: any = (document.querySelector('#TaskDetails') as any).ej2_instances[0];

    if (value) {
      const state = JSON.parse(value);
      ganttObj.treeGrid.setProperties(state);
      message = "Previous Gantt state restored.";
    } else {
      message = "No saved state found.";
    }
    updateMessage();
  }

  function updateMessage() {
    const msg = document.getElementById("msg");
    if (msg) msg.innerHTML = message;
  }

  return (
    <div>
      <button className="e-success" style= onClick={save}>
        Save
      </button>
      <button className="e-danger" onClick={restore}>
        Restore
      </button>

      <div
        id="msg"
        style=>
      </div>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowSorting={true}
        allowFiltering={true}
        editSettings={editSettings}
        toolbar={toolbar}
        dataSource={data}
        taskFields={taskSettings}
        enablePersistence={true}
        splitterSettings={splitterSettings}
        sortSettings={sortSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar, Sort]} />
      </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/33.1.44/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>
</head>

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

</html>

Get or set localStorage value

When enablePersistence is set to true, the Gantt Chart component state is stored in window.localStorage. The stored data can be retrieved or updated using the getItem and setItem methods available in the browser’s localStorage.

//get the Gantt model.
let value: string = window.localStorage.getItem('ganttGantt'); //"ganttGantt" is component name + component ID.
let model: Object = JSON.parse(model);
//set the Gantt model.
window.localStorage.setItem('ganttGantt', JSON.stringify(model)); //"ganttGantt" is component name + component ID.

You can refer to our React Gantt feature tour page for its groundbreaking feature representations. You can also explore our React Gantt example to know how to present and manipulate data.

Prevent columns from persisting

When enablePersistence is set to true, Gantt properties such as Filtering, Sorting, and Columns are automatically saved.

To prevent specific properties from being persisted, use the addOnPersist method.

When the enablePersistence property is set to true, the Gantt features such as column template, column formatter, header text, and value accessor will not persist.

The example below shows how to prevent Gantt columns from being persisted. In the dataBound event, override the addOnPersist method and remove Columns from the persistence key list.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const columns: = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },
    { field: 'TaskName', headerText: 'Task Name', width: 150 },
    { field: 'StartDate', headerText: 'Start Date', width: 150 },
    { field: 'Duration', headerText: 'Duration', width: 150 },
    { field: 'Progress', headerText: 'Progress', width: 150 }
  ];
  function onDataBound() {
    const ganttObj = (document.querySelector('#ganttDefault') as any).ej2_instances[0];
    const originalPersist = ganttObj.addOnPersist;
    ganttObj.addOnPersist = (keys) => {
      const filtered = keys.filter(k => k !== 'columns');
      return originalPersist.call(ganttObj, filtered);
    };
  }

  function addColumn() {
    const ganttObj = (document.querySelector('#ganttDefault') as any).ej2_instances[0];
    const newColumn = {
      field: 'Progress',
      headerText: 'Progress',
      width: 100
    };
    ganttObj.columns.push(newColumn);
    ganttObj.refresh();
  }

  function removeColumn() {
    const ganttObj = document.querySelector('#ganttDefault').ej2_instances[0];
    ganttObj.columns.pop();
    ganttObj.refresh();
  }

  return (
    <div>
      <div style=>
        <ButtonComponent onClick={addColumn}>Add Columns</ButtonComponent>
        <ButtonComponent onClick={removeColumn}>Remove Columns</ButtonComponent>
      </div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        columns={columns}
        enablePersistence={true}
        dataBound={onDataBound}
      >
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const columns: ColumnModel[] = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },
    { field: 'TaskName', headerText: 'Task Name', width: 150 },
    { field: 'StartDate', headerText: 'Start Date', width: 150 },
    { field: 'Duration', headerText: 'Duration', width: 150 },
    { field: 'Progress', headerText: 'Progress', width: 150 }
  ];
  function onDataBound() {
    const ganttObj: any = (document.querySelector('#ganttDefault') as any).ej2_instances[0];
    const originalPersist = ganttObj.addOnPersist;
    ganttObj.addOnPersist = (keys: string[]) => {
      const filtered = keys.filter(k => k !== 'columns');
      return originalPersist.call(ganttObj, filtered);
    };
  }

  function addColumn() {
    const ganttObj: any = (document.querySelector('#ganttDefault') as any).ej2_instances[0];
    const newColumn: ColumnModel = {
      field: 'Progress',
      headerText: 'Progress',
      width: 100
    };
    ganttObj.columns.push(newColumn);
    ganttObj.refresh();
  }

  function removeColumn() {
    const ganttObj: any = (document.querySelector('#ganttDefault') as any).ej2_instances[0];
    ganttObj.columns.pop();
    ganttObj.refresh();
  }

  return (
    <div>
      <div style=>
        <ButtonComponent onClick={addColumn}>Add Columns</ButtonComponent>
        <ButtonComponent onClick={removeColumn}>Remove Columns</ButtonComponent>
      </div>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        columns={columns}
        enablePersistence={true}
        dataBound={onDataBound}
      >
      </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/33.1.44/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>
</head>

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

</html>

Add to persist

Persistence in the Syncfusion® React Gantt Chart component enables storing and restoring the component state. It supports preserving column layout, sorting, filtering, and configuration elements such as column templates, header templates, and header text, ensuring consistent behavior across sessions.

Add a new column in persisted columns list

When enablePersistence is set to true in the Syncfusion Gantt Chart component, column configurations are saved automatically. To add a new column to the persisted list, update the column collection using columns.push(), then call the refreshColumns method on the treeGrid object in the Gantt instance to update the UI.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Inject
} from '@syncfusion/ej2-react-gantt';
import {
  Edit,
  Toolbar,
  Sort
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search',
    'ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings = { columnIndex: 2 };

  const sortSettings = {
    columns: []
  };

  let message = "";

  function save() {
    const ganttObj = document.querySelector('#TaskDetails').ej2_instances[0];
    const persistData = ganttObj.getPersistData();
    if (persistData) {
      window.localStorage.setItem("ganttTaskDetails", persistData);
      message = "Gantt state saved.";
      updateMessage();
    }
  }

  function restore() {
    const value = window.localStorage.getItem("ganttTaskDetails");
    const ganttObj = document.querySelector('#TaskDetails').ej2_instances[0];

    if (value) {
      const state = JSON.parse(value);
      ganttObj.treeGrid.setProperties(state);
      message = "Previous Gantt state restored.";
    } else {
      message = "No saved state found.";
    }
    updateMessage();
  }

  function updateMessage() {
    const msg = document.getElementById("msg");
    if (msg) msg.innerHTML = message;
  }

  return (
    <div>
      <button className="e-success" style= onClick={save}>
        Save
      </button>
      <button className="e-danger" onClick={restore}>
        Restore
      </button>

      <div
        id="msg"
        style=>
      </div>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowSorting={true}
        allowFiltering={true}
        editSettings={editSettings}
        toolbar={toolbar}
        dataSource={data}
        taskFields={taskSettings}
        enablePersistence={true}
        splitterSettings={splitterSettings}
        sortSettings={sortSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar, Sort]} />
      </GanttComponent>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  GanttComponent,
  ColumnsDirective,
  ColumnDirective,
  Inject
} from '@syncfusion/ej2-react-gantt';
import {
  TaskFieldsModel,
  EditSettingsModel,
  ToolbarItem,
  SplitterSettingsModel,
  SortSettingsModel,
  Edit,
  Toolbar,
  Sort
} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const editSettings: EditSettingsModel = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  const toolbar: ToolbarItem[] = [
    'Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search',
    'ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'
  ];

  const splitterSettings: SplitterSettingsModel = { columnIndex: 2 };

  const sortSettings: SortSettingsModel = {
    columns: []
  };

  let message: string = "";

  function save() {
    const ganttObj: any = (document.querySelector('#TaskDetails') as any).ej2_instances[0];
    const persistData = ganttObj.getPersistData();
    if (persistData) {
      window.localStorage.setItem("ganttTaskDetails", persistData);
      message = "Gantt state saved.";
      updateMessage();
    }
  }

  function restore() {
    const value = window.localStorage.getItem("ganttTaskDetails");
    const ganttObj: any = (document.querySelector('#TaskDetails') as any).ej2_instances[0];

    if (value) {
      const state = JSON.parse(value);
      ganttObj.treeGrid.setProperties(state);
      message = "Previous Gantt state restored.";
    } else {
      message = "No saved state found.";
    }
    updateMessage();
  }

  function updateMessage() {
    const msg = document.getElementById("msg");
    if (msg) msg.innerHTML = message;
  }

  return (
    <div>
      <button className="e-success" style= onClick={save}>
        Save
      </button>
      <button className="e-danger" onClick={restore}>
        Restore
      </button>

      <div
        id="msg"
        style=>
      </div>

      <GanttComponent
        id="TaskDetails"
        height="430px"
        allowSorting={true}
        allowFiltering={true}
        editSettings={editSettings}
        toolbar={toolbar}
        dataSource={data}
        taskFields={taskSettings}
        enablePersistence={true}
        splitterSettings={splitterSettings}
        sortSettings={sortSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar, Sort]} />
      </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/33.1.44/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>
</head>

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

</html>

Persist the header template and header Text

By default, properties such as column template, header text, header template, formatter, and value accessor are not persisted when enablePersistence is set to true, as these are defined at the application level.

To persist these settings, clone the Columns property using Object.assign, store it manually along with the persisted data, and reassign it to the Gantt’s Columns property during restoration.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  const taskSettings = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const splitterSettings = { columnIndex: 2 };
  function headerTemplate() {
    return (<div style=>Tasks Name</div>);
  }
  function clickHandler() {
    const ganttObj = document.querySelector('#ganttDefault').ej2_instances[0];
    const saved = JSON.parse(ganttObj.getPersistData());
    const cols = [...ganttObj.ganttColumns];

    saved.columns.forEach((col) => {
      const match = cols.find((c) => c.field === col.field);
      if (match) {
        col.headerText = 'Text Changed';
        col.template = match.template;
        col.headerTemplate = match.headerTemplate;
      }
    });
    ganttObj.treeGrid.setProperties(saved);
  }

  return (
    <div>
      <ButtonComponent id="restore" style= onClick={clickHandler}>
        Restore
      </ButtonComponent>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        enablePersistence={true}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" headerTemplate={headerTemplate} />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
      </GanttComponent>

    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data } from './datasource';

function App() {
  const taskSettings: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings: any = { columnIndex: 2 };

  function headerTemplate() {
    return (<div style=>Tasks Name</div>);
  }

  function clickHandler() {
    const ganttObj: any = (document.querySelector('#ganttDefault') as any).ej2_instances[0];
    const saved = JSON.parse(ganttObj.getPersistData());
    const cols = [...ganttObj.ganttColumns];

    saved.columns.forEach((col: any) => {
      const match = cols.find((c: any) => c.field === col.field);
      if (match) {
        col.headerText = 'Text Changed';
        col.template = match.template;
        col.headerTemplate = match.headerTemplate;
      }
    });

    ganttObj.treeGrid.setProperties(saved);
  }

  return (
    <div>
      <ButtonComponent id="restore" style= onClick={clickHandler}>
        Restore
      </ButtonComponent>
      <GanttComponent
        id="ganttDefault"
        height="430px"
        dataSource={data}
        taskFields={taskSettings}
        enablePersistence={true}
        splitterSettings={splitterSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="TaskID" width="90" textAlign="Right" />
          <ColumnDirective field="TaskName" width="290" headerTemplate={headerTemplate} />
          <ColumnDirective field="StartDate" width="390" textAlign="Right" format="yMd" />
          <ColumnDirective field="Duration" width="120" textAlign="Right" />
          <ColumnDirective field="Progress" width="120" textAlign="Right" />
        </ColumnsDirective>
      </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/33.1.44/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>
</head>

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

</html>