Persist the State of the Native Grid

Two common scenarios in real-life projects where you may need to store and restore a specific state of the Kendo UI for Vue Native Grid component are:

• To save the Grid's current state, including its data, columns(columns order, width, locked, and hidden states), applied filters, groupings, expanded rows, etc., and restore it to the same state when the user returns to the same page.
• To give your users the option to customize specific configurations in the Grid in a way they prefer, store these preferences and apply them every time the Grid is loaded.

The following example shows how you can persist configurations that cover both of the listed above scenarios.

Grid State Persistence Implementation

The key points in the implementation of the above example are as follows:

1. The Save and Restore buttons located above the Grid.

   Each of these buttons calls respectively the saveState and getState methods that save and load the different Grid configs.

   Copy Code<KButton class="buttons" @click="saveState">Save Grid State</KButton>
   <KButton class="buttons" @click="getState">Reload Grid State</KButton>

2. The Grid configuration.

   Each of the different Grid configurations is defined by a separate data property. The value of each property controls the behavior of the component. To save and restore the state of the Grid, we work with these configurations.

   Copy Code<Grid
       :style="{ height: '700px' }"
       :sortable="sortable"
       :filterable="filterable"
       :groupable="groupable"
       :reorderable="reorderable"
       :pageable="{ buttonCount: 4, pageSizes: true }"
       :data-items="dataResult"
       :skip="skip"
       :take="take"
       :sort="sort"
       :group="group"
       :filter="filter"
       :columns="columns"
       :detail="detailComponent"
       :expand-field="'expanded'"
       ......
       >
       ......
   
   </Grid>
   

3. The saveState method.

   This method gets the different Grid properties and configurations that we want to save, puts them in an object and saves this object in the local storage of your browser.

   For scenarios where the Grid configurations are stored in a database, instead of the localStorage.setItem() method, you must implement a custom logic that saves the gridState object to your database.

   Copy CodesaveState: function () {
       const gridState = {};
       gridState.data = [...this.ordersCopy];
       gridState.sortable = this.sortable;
       gridState.filterable = this.filterable;
       gridState.groupable = this.groupable;
       gridState.skip = this.skip;
       gridState.take = this.take;
       gridState.group = this.group;
       gridState.sort = this.sort;
       gridState.filter = this.filter;
       gridState.currentLocale = this.currentLocale;
   
       localStorage.setItem('gridState', JSON.stringify(gridState));
   }

   In the above snippet, you will notice that the two scenarios mentioned at the beginning of the article are covered - together with the sorting, filtering, grouping and other Grid configurations, we are also saving the currentLocale configuration option.

4. The getState method.

   As its name talks, this method gets the saved data from the local storage and using the updateState method, loads the saved data back.

   For scenarios where the Grid configurations are stored in a database, instead of the localStorage.getItem() method, you must implement a custom logic that gets the gridState object from your database.

   Copy CodegetState: function () {
   const gridState = JSON.parse(localStorage.getItem('gridState'));
   
   if (gridState !== null) {
       this.restoredData = gridState.data;
       this.sortable = gridState.sortable;
       this.filterable = gridState.filterable;
       this.groupable = gridState.groupable;
       this.skip = gridState.skip;
       this.take = gridState.take;
       this.group = gridState.group;
       this.sort = gridState.sort;
       this.filter = gridState.filter;
       this.currentLocale = gridState.currentLocale;
   
       this.updateState();
   }
   }

Suggested Links

• API Reference of the Grid
• API Index of the Grid