Persisting the State of the KendoReact Grid

A common requirement for web apps is to save the user customization and settings when interacting with your app, and then restore them once the user comes back at some point in the future. The KendoReact Grid exposes the capability to save and restore settings that were previously applied.

The following example demonstrates how to persist the Grid state.

Setup

To persist the state of the Grid:

1. Keep the initial skip, take and sort settings inside the dataState:

   Copy Codeconst [dataState, setDataState] = React.useState<GridState>({
       data: formattedOrders,
       total: formattedOrders.length,
       filter: { logic: 'and', filters: [] },
         skip: 0,
         take: 20,
         sort: [{ field: 'orderDate', dir: 'desc' }]
       });

2. Define the current column configuration and render their state conditionally based on the data stored in localStorage:

   Copy Code    const getInitialColumns = () => {
       const loadedColumns = localStorage.getItem('gridColumns');
       return loadedColumns
       ? JSON.parse(loadedColumns)
       : [
         { field: 'customerID', width: 200 },
         { field: 'orderDate', width: 200 },
         { field: 'shipName', width: 200 },
         { field: 'freight', width: 200 },
         { field: 'shippedDate', width: 200 },
         { field: 'employeeID', width: 200 },
         { field: 'orderID', width: 200 }
       ];
       }
       const [columns, setColumns] = React.useState(getInitialColumns);

3. Create a saveStateToLocalStorage function that retrieves the current state and sets it in the localStorage:

   Copy Code    const saveStateToLocalStorage = () => {
           const state = {
           dataState,
           columns
           };
           localStorage.setItem('gridState', JSON.stringify(state));
        };

4. Create a loadStateFromLocalStorage function that retrieves the saved state from localStorage and sets the new data to the Grid:

   Copy Code    const loadStateFromLocalStorage = () => {
           const savedState = localStorage.getItem('gridState');
       if (savedState) {
           const { dataState: savedDataState, columns: savedColumns } =
           JSON.parse(savedState)
           setDataState(savedDataState);
           setColumns(savedColumns);
           }
       };

Suggested Links

• API Reference of the Grid
• API Index of the Grid
• React Data Grid High-Level Overview