Difference between enablePersistence and loadPersistData // setProperties

[Sebastian Göhring]

So im curious:

What is the difference between loadPersistData // setProperties, and enablePersistence. I thought i had to use the first two in order to load and save grid state, but the documentation says something about local storage.

My goal is to save the Grids current state and use it later on if the user rejoins a session (even after restart of the server or similiar, so I want to cache the state).

[Mohammed Ansar Sathik Ali]

Hi Sebastian,

Thanks for contacting Syncfusion support.

Query: To know the difference between enablePersistence and loadPersistData (setProperties)

We can maintain the Grid’s current state properties while refresh the page using enablePersistence property as true it is default behavior of persistence

Based your query we suspect that you need to apply the Grid state model object at manually instead of enablePersistence functionality. Since we suggest you to use the getPersistData method to get the persisted grid state. You can restore the Grid model object by using the setProperties method  it will restore the grid properties. The persistence feature will store the Grid settings in the browser’s localStorage.

For your convenience, we have attached the code example and sample for your reference.

ej.base.enableRipple(true);

var savedProperties;

var grid = new ej.grids.Grid({

  dataSource: window.employeeData,

  allowSorting: true,

  enablePersistence: true,

  allowFiltering: true,

  columns: [

    {

      field: 'EmployeeID',

      headerText: 'Employee ID',

      textAlign: 'Right',

      width: 125,

    },

    { field: 'FirstName', headerText: 'Name', width: 125 },

    { field: 'Title', headerText: 'Title', width: 180 },

    { field: 'City', headerText: 'City', width: 110 },

    { field: 'Country', headerText: 'Country', width: 110 },

  ],

});

grid.appendTo('#Grid');

 

document.getElementById('btnsave').addEventListener('click', onSave);

 

document.getElementById('btnrestore').addEventListener('click', onRestore);

 

function onSave() {

  localStorage.setItem("myitem",grid.getPersistData()); // get the current grid state here.

 

  console.log(savedProperties);

}

 

function onRestore() {

  var loadpersistData =  JSON.parse(localStorage.getItem("myitem"));

  grid.setProperties(loadpersistData); // set the properties to restore the state.

  console.log(loadpersistData);

}

 

 

Sample: https://stackblitz.com/edit/9thdlx-kap4le?file=index.js

Documentation: https://ej2.syncfusion.com/documentation/grid/state-persistence/state-persistence/

Please get back to us if you need further assistance on this.

Regards,

Mohammed Ansar.