State Persistence

24 Feb 20221 minute to read

Essential JS 2 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.

CSHTML

<ejs-grid id="Grid" enablePersistence="true" allowPaging="true">
    <e-grid-pageSettings pageCount="5"></e-grid-pageSettings>                  
    <e-datamanager url='http://services.odata.org/V4/Northwind/Northwind.svc/Products/' adaptor="ODataV4Adaptor"  crossdomain="true"></e-datamanager>
    <e-grid-columns>
        <e-grid-column field="ProductID" headerText="ProductID" textAlign="Right" width="160"></e-grid-column>
        <e-grid-column field="ProductName" headerText="Product Name" width="170"></e-grid-column>
        <e-grid-column field="UnitPrice"  headerText="Unit Price" format="C2" textAlign="Right" width="170"></e-grid-column>
        <e-grid-column field="UnitsInStock" headerText="Units in Stock" textAlign="Right" width="170"></e-grid-column>
        <e-grid-column field="Discontinued" headerText="Discontinued" width="150" displayAsCheckBox="true"  textAlign="Center" type="boolean"></e-grid-column>
    </e-grid-columns>
</ejs-grid>