DataGrid for DevExtreme - How to modify the persisted state

This example shows how to exclude component settings that you don't need restored after the page is reloaded.

In this example, you can reorder grid columns, sort and group data, and perform other modifications in the UI. After you reload the page, all modifications will persist, except filters applied to grid columns.

You can use the demonstrated approach with the following UI components:

• DataGrid
• TreeList
• PivotGrid

Implementation Steps

1. Switch state storing into manual mode
   Set stateStoring.type to "custom".

2. Implement the customSave and customLoad functions
   customSave should modify the state and save it to your storage; customLoad should load the state from the storage and return it to the UI component. In this example, customSave removes filters applied to grid columns.

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • Home.vue
• React
  • App.js

Documentation

• DataGrid - stateStoring API
• Getting Started with DataGrid

More Examples

• DataGrid State Persistence Demo