State persistence in EJ2 JavaScript Gantt control
29 Jul 202312 minutes to read
State persistence refers to the Gantt’s state maintained in the browser’s localStorage
even if the browser is refreshed or if you move to the next page within the browser. State persistence stores gantt’s model object in the local storage when the enablePersistence
is defined as true.
Get or set localStorage value
If the enablePersistence
property is set to true, the gantt property value is saved in the window.localStorage
for reference. You can get/set the localStorage value by using the getItem
/setItem
method in the window.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
JavaScript Gantt
feature tour page for its groundbreaking feature representations. You can also explore ourJavaScript Gantt example
to knows how to present and manipulate data.
Prevent columns from persisting
When the enablePersistence property is set to true, the Gantt properties such as Filtering, Sorting , and Columns will persist. You can use the addOnPersist
method to prevent these Gantt properties from persisting.
The following example demonstrates how to prevent Gantt columns from persisting. In the dataBound event of the Gantt, you can override the addOnPersist
method and remove the columns from the key list given for persistence.
Note: 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.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },
{ field: 'TaskName', headerText: 'Task Name', width: 150},
{ field: 'StartDate', headerText: 'StartDate', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150},
],
enablePersistence: true,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
dataBound: dataBound
});
ganttChart.appendTo('#Gantt');
function dataBound(args) {
var cloned = this.addOnPersist;
this.addOnPersist = function (key) {
key = key.filter(function (item) { return item !== "columns"; });
return cloned.call(this, key);
};
}
document.getElementById('add').onclick = function () {
var obj = { field: "Progress", headerText: 'Progress', width: 100 };
ganttChart.columns.push(obj);
ganttChart.treeGrid.refreshColumns();
};
document.getElementById('remove').onclick = function () {
ganttChart.columns.pop();
ganttChart.treeGrid.refreshColumns();
};
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="add">Add columns</button>
<button id="remove">Remove columns</button>
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Persist the header template and header Text
By default, the Gantt properties such as column template, header text, header template, column formatter, and value accessor will not persist when enablePersistence is set to true. Because the column template and header text can be customized at the application level.
If you wish to restore all these column properties, then you can achieve it by cloning the gantt’s columns property using JavaScript Object’s assign method and storing this along with the persist data manually. While restoring the settings, this column object must be assigned to the gantt’s columns property to restore the column settings as demonstrated in the following sample.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },
{ field: 'TaskName', headerText: 'Task Name', width: 150, headerTemplate: '#customertemplate' },
{ field: 'StartDate', headerText: 'StartDate', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150},
{ field: 'Progress', headerText: 'Progress', width: 150 },
],
enablePersistence: true,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
},
});
ganttChart.appendTo('#Gantt');
var savedProperties;
document.getElementById('restore').onclick = function () {
savedProperties = JSON.parse(ganttChart.getPersistData());
var gridColumnsState = Object.assign([], ganttChart.ganttColumns);
savedProperties.columns.forEach(function (col) {
var headerText = gridColumnsState.find(function (colColumnsState) { return colColumnsState.field === col.field; })['headerText'];
var colTemplate = gridColumnsState.find(function (colColumnsState) { return colColumnsState.field === col.field; })['template'];
var headerTemplate = gridColumnsState.find(function (colColumnsState) { return colColumnsState.field === col.field; })['headerTemplate'];
col.headerText = 'Text Changed';
col.template = colTemplate;
col.headerTemplate = headerTemplate;
});
console.log(savedProperties);
ganttChart.treeGrid.setProperties(savedProperties);
};
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" type="text/css">
<style>
.e-column:before {
content: '\e815';
}
.e-header:before {
content: '\ea9a';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<script id="customertemplate" type="text/x-template">
<span class="e-icons e-header" ></span>
Task Name
</script>
<div id="container">
<button id="restore">Restore</button>
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>