New to Kendo UI for Angular? Start a free 30-day trial

Persisting the Angular Data Grid State

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 Angular Grid exposes the capability to save and restore settings that were previously applied

To persist the Grid state you must store the following Grid information in a single object:

The following example demonstrates how to persist the Grid state.

Example
View Source
Change Theme:

Setup

To persist the state of the Grid:

  1. Create a custom GridSettings object that stores the current state of the Grid, the data, and the column configuration objects.

    public gridSettings: GridSettings = {
        state: {
            skip: 0,
            take: 5,
            filter: {
                logic: 'and',
                filters: []
            },
            group: [],
        },
        gridData: process(sampleProducts, {
            skip: 0,
            take: 5,
            filter: {
                logic: 'and',
                filters: []
            },
            group: [],
        }),
        columnsConfig: [
            {
                field: 'ProductID',
                title: 'ID',
                filterable: false,
                width: 60
            },
            {
                field: 'ProductName',
                title: 'Product Name',
                filterable: true,
                width: 300
            },
            ...
        ]
    };
  2. Use the GridSettings object and assign the corresponding properties in Grid.

    <kendo-grid
        #grid
        [data]="gridSettings.gridData"
        [pageSize]="gridSettings.state.take"
        [skip]="gridSettings.state.skip"
        [sort]="gridSettings.state.sort"
        [filter]="gridSettings.state.filter"
        [group]="gridSettings.state.group"
        ...
    >
        <kendo-grid-column
            *ngFor="let col of gridSettings.columnsConfig"
            [field]="col.field"
            [title]="col.title"
            [width]="col.width"
            ...
        ></kendo-grid-column>
    </kendo-grid>
  3. Handle the dataStateChange event of the Grid and update the GridSettings object.

    public dataStateChange(state: State): void {
        this.gridSettings.state = state;
        this.gridSettings.gridData = process(sampleProducts, state);
    }
  4. Use a custom button to save the GridSettings object.

    <button kendoButton (click)="saveGridSettings(grid)">Save current state</button>
    public saveGridSettings(grid: GridComponent): void {
        const columns = grid.columns;
    
        //add only the required column properties to save local storage space
        const gridConfig = {
            state: this.gridSettings.state,
            columnsConfig: columns.toArray().map((item) => {
                return <ColumnSettings>{
                    field: item['field'],
                    width: item['width'],
                    title: item['title'],
                    filter: item['filter'],
                    format: item['format'],
                    filterable: item['filterable'],
                    orderIndex: item['orderIndex']
                };
            })
        };
    
        this.persistingService.set('gridSettings', gridConfig);
    }
  5. Load the previously stored settings (if any) and map them to update the Grid.

    <button
            kendoButton
            *ngIf="savedStateExists"
            (click)="grid1Settings = mapGridSettings(persistingService.get('gridSettings'))">Load saved state</button>
    public mapGridSettings(gridSettings: GridSettings): GridSettings {
        const state = gridSettings.state;
    
        return {
            state,
            columnsConfig: gridSettings.columnsConfig.sort((a, b) => a.orderIndex - b.orderIndex),
            gridData: process(sampleProducts, state)
        };
    }
  6. Create a service to store the saved GridSettings object in the browser local storage and retrieve it when needed.

    const getCircularReplacer = () => {
        const seen = new WeakSet();
        return (key, value) => {
            if (typeof value === "object" && value !== null) {
                if (seen.has(value)) {
                    return;
                }
                seen.add(value);
            }
            return value;
        };
    };
    @Injectable()
    export class StatePersistingService {
        public get<T>(token: string): T {
            const settings = localStorage.getItem(token);
            return settings ? JSON.parse(settings) : settings;
        }
        public set<T>(token: string, gridConfig: GridSettings): void {
            localStorage.setItem(token, JSON.stringify(gridConfig, getCircularReplacer()));
        }
    }

In this article

Not finding the help you need?