Grid State Persistence
ZingGrid has the ability to preserve its state between page loads. This feature can easily be enabled by adding the preserveStateId
to your grid!
Specify which states in preserve with preserveStateOptions
. Some of the states preserved are:
- Column position -
columnposition
- Column visibility -
columnvisibility
- Column width -
columnwidth
- Filter -
filter
- Frozen columns -
columnfrozen
- Frozen rows -
rowfrozen
- Layout -
layout
- Page -
page
- Page size -
pagesize
- Row group -
rowgroup
- Row Selector -
rowselector
- Search -
search
- Selector -
selector
- Sort -
sort
- More Coming!
PreserveStateId Attribute
To state preserving state on your grid, add the preserveStateId
attribute to the <zing-grid>
tag. Set this attribute to a unique string that will be used as the ID to store the grid's state in. Grids with the same preserveStateId
will share states.
<zing-grid preserve-state-id="featuresGridState"></zing-grid>
Grid with State
Here is a complete grid with state preserved:
Saving Specific States
You may not want to preserve all state in your grid. Use the preserveStateOptions
attribute to specify which state(s) to preserve:
<zing-grid preserve-state-id="featuresGridState2" preserve-state-options="columnvisibility,filter,sort"> </zing-grid>
Custom State Functions
To trigger an action after the state changes, is to set the following attributes to the name of the function.
The attribute preserveStateSave
executes the specified function when the grid saves the state. The function should contain two arguments:
- id - the id assigned to
preserveStateId
- data - the state of the grid
There is also the preserveStateLoad
attribute, which executes the function when state is loaded into the grid. The function takes in one argument:
- id - the id assigned to
preserveStateId
<zing-grid preserve-state-id="featuresGridState3" preserve-state-load="loadMe" preserve-state-save="saveMe"> </zing-grid> <script> function loadMe(id) { console.log('id: ', id); }; function saveMe(id, data) { console.log('id: ', id); console.log('data: ', data); }; </script>
Setting State
To update the state of the grid, use either of the API methods:
- setState(data) - Sets the current (all) states
- setStateField(field, data) - Sets the specified state
The best way to get the state data for loading into the grid is by using preserveStateLoad
to retrieve the data.
<zing-grid preserve-state-id="featuresGridState4"></zing-grid> <script> // Set sort state let zgRef = document.querySelector('zing-grid'); zgRef.executeOnLoad(() => { zgRef.setState({"sort":{"index":"director","order":1}}); // alternatively // zgRef.setStateField('sort', {"index":"director","order":1}); }); </script>
[features: grid state persistence]