Syncfusion AI Assistant

How can I help you?

State Persistence in Syncfusion® JavaScript controls

6 Feb 20265 minutes to read

Syncfusion® JavaScript controls can persist their state across page refreshes and navigation. Enable this feature by setting the enablePersistence property to true on the desired control. When enabled, the control’s state is serialized and stored in the browser’s localStorage (typically on the page unload event), then restored when the control reinitializes.

Note: localStorage has size limits and is scoped per origin. Avoid persisting large data structures (for example, full data sources); prefer persisting UI state such as paging, selection, sorting, and filter settings.

The following example demonstrates enabling persistence for the Grid control.

import { Grid, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Page);

let grid: Grid = new 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 lang="en">

<head>
            
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.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>
        .e-row[aria-selected="true"] .e-customizedExpandcell {
            background-color: #e0e0e0;
        }
        .e-grid.e-gridhover tr[role='row']:hover {
            background-color: #eee;
        }
        .e-expand::before {
        content: 'e5b8';
    }
    </style>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'> 
        <div id='Grid'></div>        
    </div>
</body>
</html>

State Persistence supported controls and properties

The table below lists Syncfusion® JavaScript controls that support state persistence and the properties that are stored in localStorage when persistence is enabled.

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

See the following control documentation to learn more about state persistence and control-specific behavior.