Search results

State Persistence

22 Nov 2022 / 1 minute to read

Syncfusion React library has support for persisting component’s state across page refreshes or navigation. To enable this feature, set enablePersistence property as true to the required component. This will store the component’s state in browser’s localStorage object on page unload event. For example, we have enabled persistence to grid component in the following code.

Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

function App() {

    return( <GridComponent dataSource={data} allowFiltering={true} allowPaging={true} enablePersistence={true} height={230}>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' width='100' textAlign="right"></ColumnDirective>
            <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
            <ColumnDirective field='EmployeeID' width='100' textAlign="right"></ColumnDirective>
            <ColumnDirective field='Freight' width='100' format="C2" textAlign="right"></ColumnDirective>
            <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
        </ColumnsDirective>
    </GridComponent>)
};
export default App;
ReactDOM.render(<App />, document.getElementById('grid'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GridComponent } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
function App() {
    return (<GridComponent dataSource={data} allowFiltering={true} allowPaging={true} enablePersistence={true} height={230}>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' width='100' textAlign="right"></ColumnDirective>
            <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
            <ColumnDirective field='EmployeeID' width='100' textAlign="right"></ColumnDirective>
            <ColumnDirective field='Freight' width='100' format="C2" textAlign="right"></ColumnDirective>
            <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
        </ColumnsDirective>
    </GridComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('grid'));