Issue with enablePersistence in Syncfusion Grid – State Saved Automatically on Page Reload Instead of on Button Click

[Karthikeyan Karthikeyan]

Dear Syncfusion Support Team,

Description:

I am using the Syncfusion JavaScript Grid with the enablePersistence property to save the current grid state (like sorting, filtering, etc.). However, I am facing an issue where the grid state is automatically saved on page reload, even though I want to control when the state is saved or restored.

Currently, I have two buttons in my UI:

Save Button: To save the current grid state.

Restore Button: To restore the saved state.

But the issue is that, when the page reloads, the grid state is automatically saved and persists, even though I want it to happen only when the Save Button is clicked. I need the grid to only save the state when the Save Button is explicitly clicked and restore it only when the Restore Button is clicked.

Steps to Reproduce:

Add the Syncfusion JavaScript Grid to the page with the enablePersistence property set to true.

Create two buttons:

A Save button that saves the grid state.

A Restore button that restores the grid state.

Reload the page.

Observe that the grid state is automatically saved and persisted after the page reload, instead of saving it only when the Save button is clicked.

Expected Behavior:

The grid state should only be saved when the Save Button is clicked.

The grid state should only be restored when the Restore Button is clicked.

Page reload should not automatically save or restore the grid state.

Actual Behavior:

The grid state is saved automatically on page reload, even though I only want it to save when the Save Button is clicked. This behavior occurs despite the fact that enablePersistence is set to true.

Please Refer this below URL : https://stackblitz.com/edit/akbywl-upbvmg?file=index.js

Best regards,

Karthikeyan

[Karthikeyan Karthikeyan]

Dear syncfusion Team, 

can you please provide any solution for the above issue ?

[Sivaranjani Rajasekaran]

Hi Karthikeyan,

Greetings from Syncfusion Support,

To meet your requirement, please remove the enablePersistence property from the Grid. This will prevent the saved state from being automatically restored when the page reloads. Instead, you can use the grid.getPersistData method to get the current state and save it in local storage when the "Save" button is clicked. To restore the state, use the "Restore" button along with the setProperties method of the grid.

We have modified a sample for you. Please find the sample and documentation links below for more information:

Modified sample Link : https://stackblitz.com/edit/akbywl-qe1idq?file=index.js

Documentation Link : https://ej2.syncfusion.com/javascript/documentation/grid/state-management

Please get back to us if you have any questions.

Regards,

Sivaranjani R.

[Karthikeyan Karthikeyan]

Can Syncfusion Grid properties be stored in IndexedDB  instead of localStorage? 

[Pavithra Subramaniyam]

Hi Karthikeyan,

Yes, you can store Syncfusion Grid properties in IndexedDB instead of localStorage. By default, Syncfusion Grid uses browser storage mechanisms like localStorage for saving grid state, but you can use IndexedDB to save the Grid properties using the below custom logic.

Here's a general approach to storing grid properties in IndexedDB:

Setup IndexedDB

Set up an IndexedDB database and object store to hold the grid properties.

Implement Saving and Restoring Logic

1. Saving Grid State to IndexedDB:

First, set up logic to save grid state (using “getPersistData” method) to IndexedDB when there are changes.

2. Restoring Grid State from IndexedDB:

             Retrieve the grid state from IndexedDB when the grid initializes and apply it to the grid properties using the “setProperties” method.

openDatabase();

function openDatabase() {

  const request = indexedDB.open('SyncfusionDB', 1);

 

  request.onupgradeneeded = (event) => {

    const db = event.target.result;

    if (!db.objectStoreNames.contains('gridState')) {

      db.createObjectStore('gridState', { keyPath: 'id' });

    }

  };

}

 

document.getElementById('save').addEventListener('click', function () {

  const dbRequest = indexedDB.open('SyncfusionDB', 1);

  dbRequest.onsuccess = (event) => {

    const db = event.target.result;

    const transaction = db.transaction('gridState', 'readwrite');

    const store = transaction.objectStore('gridState');

 

    const state = grid.getPersistData();

    store.put({ id: 1, state });

 

    transaction.oncomplete = () => console.log('Grid state saved.');

  };

});

 

document.getElementById('restore').addEventListener('click', function () {

  const dbRequest = indexedDB.open('SyncfusionDB', 1);

  dbRequest.onsuccess = (event) => {

    const db = event.target.result;

    const transaction = db.transaction('gridState', 'readonly');

    const store = transaction.objectStore('gridState');

 

    const request = store.get(1);

    request.onsuccess = (event) => {

      const data = request.result;

      if (data) {

        grid.setProperties(JSON.parse(data.state));

      }

    };

  };

}

 

 

Regards,

Pavithra S

[Karthikeyan Karthikeyan]

Dear syncfusion Team,

I need to restore the previous state of syncfusion grid columns header texts .but, when we try to restore the previous state it takes grid column's field as a header text , can you please give any solution for restoring the header texts ?

[Pavithra Subramaniyam]

Hi Karthikeyan,

By default, in the Syncfusion Grid state management, certain column properties such as column template, headerText, headerTemplate, column formatter, and valueAccessor are not persisted. This is because these properties can be customized at the application level.

To restore these column properties and achieve persistence, you can follow the approach of cloning the grid’s columns property using JavaScript Object’s assign method and manually storing it along with the persist data. When restoring the settings, this cloned column object must be assigned to the grid’s columns property to restore the column settings. The following sample demonstrates this process:

document.getElementById('save').addEventListener('click', function () {

 

  const dbRequest = indexedDB.open('SyncfusionDB', 1);

  dbRequest.onsuccess = (event) => {

    const db = event.target.result;

    const transaction = db.transaction('gridState', 'readwrite');

    const store = transaction.objectStore('gridState');

    

    var persistedGridSettings = JSON.parse(grid.getPersistData());

    var gridColumns = Object.assign([], (grid.getColumns()));

 

    persistedGridSettings.columns.forEach(function (persistedColumn) {

      var column = gridColumns.find(function (col) { return col.field === persistedColumn.field; });

      if (column) {

        persistedColumn.headerText = column.headerText;

      }

    });

    const state = JSON.stringify(persistedGridSettings);

    store.put({ id: 1, state });

    transaction.oncomplete = () => console.log('Grid state saved.');

  };

});

 

Documentation: https://helpej2.syncfusion.com/javascript/documentation/grid/state-management#persist-the-column-template-header-template-and-header-text