Reset grid state to a stored state WITHOUT a page reload

Question

Hello,I am using the persistence feature of the grid control meaning that whatever filters / sorting etc are applied by a user are stored and reapplied between page reloads, navigation etc.However, before the grid is rendered for the first time, I apply some filters and sorting - the "initial state".I want to be able to restore my grid to this initial state.Currently, I am able to store this in local storage alongside the state. On a specific request, I store a flag that means when the page is reloaded, instead of using the state the grid stores whenever the page is refreshed/unloaded, I take my stored initial state instead.This is working, but the entire page reloading is sub-optimal from a usability perspective.I want to know if there's an easy way to refresh the grid control with my stored state WITHOUT reloading the page, is there some event I can trigger to completely rebuild the grid and use my stored state?Thanks

Sujith Kumar Rajkumar · Accepted Answer

Hi Joshua, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to dynamically restore the Grid to its initial settings. You can achieve it by storing the Grid’s initial settings(which can be retrieved using the getPersistData method of the Grid) in the dataBound event and then when needed pass this persisted data to the Grid’s setProperties method in order to restore it. This is demonstrated in the below code snippet, 
 





// Grid’s dataBound event handler 
dataBound() { 
    // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render 
   if (this.initialFlag) { 
        // The Grid’s initial settings is stored in a global variable 
        // You can store this settings in the local storage or your database as per your requirement 
       this.savedProperties = Object.assign([], JSON.parse(this.$refs.grid.ej2Instances.getPersistData())); 
       this.initialFlag = false; 
   } 
}, 
// button click function for restoring Grid’s settings 
restoreBtnClick: function () { 
   // The initial settings is restored to the Grid 
   this.$refs.grid.ej2Instances.setProperties(this.savedProperties); 
},  
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://codesandbox.io/s/vue-forked-e3l8f?file=/src/App.vue  
 
API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#databound 
                  https://ej2.syncfusion.com/vue/documentation/api/grid/#getpersistdata 
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R