Save and restore state.
Save columns, sorting, filters, and selection, then inspect restoration results.
Quick overview
Save view state to retain user-adjusted widths, sorting, and filters. Distinguish it from backing up order values.
Integration steps
- Save from the workspace
Change widths or sorting in the Grid workspace, then click Save state below. The getState() result appears.
- Change and restore
Change widths or sorting again, then click Restore state. Verify the saved configuration returns.
- Connect app storage
Persist getState() results in your app to survive refreshes. Prepare matching data and columns, restore with setState(), and inspect the report.
Reuse saved columns, sorting, filters, and other view configuration.
The demo saves only in the current workspace's memory. Refreshing or navigating to another documentation view may discard the demo state.
Useful terms
- Serialization
- Converting an object into a format such as JSON for storage or transfer.
- Restore report
- A result describing which areas were restored and which could not be restored.
Save state
#getState() captures columns, sorting, filters, selection, and other view configuration. Try Save state and Restore state below the workspace Grid. Demo state remains only in the current workspace's memory.
const savedState = await grid.getState();
const serialized = JSON.stringify(savedState);
// Store serialized in your service's user-preference storage.Restore state
#Prepare matching row and column IDs, then call setState() and inspect the returned report. Check overall restoration in ok and applied areas in appliedSlices. Missing entitlements or data may prevent some areas from being restored.
const report = await grid.setState(JSON.parse(serialized));
console.log(report);
if (!report.ok) {
// Inspect issues, unrestorableSlices, droppedSlices, and other report fields.
console.warn('Some view state could not be restored.', report);
}View state and source data
#Grid state is not a backup of business row data. Distinguish server saves, data snapshots, and view configuration restoration. Load state appropriate to the current user and data set.
stateUpdated detail reports changed areas. To obtain the complete state after receiving a notification, call getState().