State Persistence in Syncfusion JavaScript controls

06 Jun 2023 / 3 minutes to read

Syncfusion JavaScript (ES5) controls support persisting their state across page refreshes or navigation. To enable this feature, set the enablePersistence property to true for the desired control. This stores the control’s state in the browser’s localStorage object on the unload event of the page. For example, the enablePersistence property can be set for the Grid control, as shown in the following code snippet.

Source

Preview

index.js

index.html

var grid = new ej.grids.Grid({
    dataSource: data,
    enablePersistence: true,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
    ],
    allowPaging: true,
    pageSettings: { pageSize: 7 }
});
grid.appendTo('#Grid');

<!DOCTYPE html><html><head>
            
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="JavaScript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="Grid"></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>

State Persistence supported controls and properties

The following table illustrates the list of Syncfusion JavaScript controls that are supported with state persistence and the properties that are stored in the localStorage.

control Name	Properties
Grid	Columns filterSettings searchSettings groupSettings pageSettings selectedRowIndex scrollPosition
Accordion	expandedIndices
Tabs	selectedItem
Schedule	currentView selectedDate scrollLeft scrollTop
Kanban	columns dataSource swimlaneToggleArray
Chart	zoomFactor zoomPosition
Maps	zoomSettings
Pivot Table	dataSourceSettings pivotValues gridSettings chartSettings displayOption
TreeGrid	columns pageSettings searchSettings filterSettings selectedRowIndex sortSettings
Switch, Checkbox	checked
RadioButton	checked value
ColorPicker, ListBox, In-placeEditor, RichTextEditor, Autocomplete, Calendar, ComboBox, DatePicker, DropDownList, MaskedTextBox, NumericTextBox, Textbox, TimePicker, Multiselect, DateTimePicker, Slider, Dropdown Tree	value
QueryBuilder	rule
Splitter	paneSettings
DateRangePicker	startDate endDate value
Uploader	filesData
ListView	cssClass enableRtl htmlAttributes enable fields animation headerTitle sortOrder showIcon height width showCheckBox checkBoxPosition
TreeView	selectedNodes checkedNodes expandedNodes
Dashboard Layout	panels
File Manager	view path selectedItems
Sidebar	type position isOpen

Check out the following control’s document to learn more about the state persistence.