Persisting the State of the Kendo UI for Vue Grid

Updated on Feb 9, 2026

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 Kendo UI for Vue Grid exposes the capability to save and restore settings that were previously applied.

The following example demonstrates how to persist the Grid state.

Change Theme

Theme

Loading ...

Setup

To persist the state of the Grid:

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

   jsx

       const dataState = ref({
           sort: [{ field: 'orderDate', dir: 'desc' }],
           skip: 0,
           take: 20,
           filter: { logic: 'and', filters: [] }
       });

2. Define the column configuration and restore the column state from localStorage:

   jsx

   const columns = ref([
       { 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 loadedColumns = localStorage.getItem('gridColumns');
   const columnsState = ref<any>(loadedColumns ? JSON.parse(loadedColumns) : null);

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

   jsx

     const saveStateToLocalStorage = () => {
       const state = {
           dataState: dataState.value,
           columnsState: columnsState.value
       };
       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:

   jsx

     const loadStateFromLocalStorage = () => {
           const savedState = localStorage.getItem('gridState');
   
           if (savedState) {
               const { dataState: savedDataState, columnsState: savedColumns } = JSON.parse(savedState);
               dataState.value = savedDataState;
               columnsState.value = savedColumns;
           }
       };

Suggested Links

• API Reference of the Grid
• API Index of the Grid