syidaxgrid
Home Pricing Settings

SYIDAX GRID

Save and restore view state

View state saves user configuration such as column widths, order, sorting, filters, and selection. Distinguish it from data snapshots that back up original order values.

Markdown source Features

How it works and when to use it

getState() returns a versioned state object. setState() reports applied portions and problems, so do not assume every restore succeeds completely.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Save views per user

Read state from a Grid whose data and columns are ready.

javascript
const state = await grid.getState();
localStorage.setItem('orders-grid-state', JSON.stringify(state));

Verify the result: Save the current configuration in the browser. Include user and view identifiers in the storage key to keep states separate.

Example 2. Restore an existing view

Handle failures to parse the saved JSON in your app.

javascript
const text = localStorage.getItem('orders-grid-state');
if (text) {
  const report = await grid.setState(JSON.parse(text));
  console.log(report);
}

Verify the result: If columns were removed or some state is unsupported, read the report and tell the user about the partial restore.

Example 3. Initial rendering and column-only state

Pass initialState before mounting to restore from the first render. If only column layout is needed, use getColumnState()/applyColumnState() to reduce the saved scope.

Verify the result: Initial state is applied once. Use setState() to restore a running Grid. Callback functions and source data are not recreated from JSON state.

Combining features and troubleshooting

Selection and focus restoration require stable row IDs and column identifiers for the same data. Do not force selection of deleted rows.

Check getStateCaptureReport() and the restore report for omitted information. Use snapshots to restore original values.

Related reading