Persist the State

Some scenarios require you to persist the state and column configuration of the Grid, or load its previously stored settings.

To persist the state of the Kendo UI Grid for Angular, use either of the following approaches:

Using Dedicated Methods

To access the current Grid state, use a component field in the respective State object. To access the current columns configuration, use the grid.columns field.

  1. Create a custom GridSettings object by using custom logic. You can further process and store GridSettings through a service. The following example demonstrates how to store the Grid settings in the LocalStorage of the browser. You can use the same approach to persist the settings elsewhere too.

    public saveGridSettings(grid: GridComponent): void {
        const columns = grid.columns;
    
        const gridConfig = {
            state: this.grid1Settings.state,
            columnsConfig: columns.toArray().map(
                item => Object.keys(item)
                    .filter(
                        propName => !propName.toLowerCase().includes('template')
                    )
                    .reduce((acc, curr) => ({...acc, ...{[curr]: item[curr]}}), <ColumnSettings> {});
            )
        };
    
        this.persistingService.set('gridSettings', gridConfig);
    }
    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()));
        }
    }
  2. Load the previously stored settings (if any) and map them so that the Grid can be accordingly updated.

    <button
            class="k-button"
            *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)
        };
    }

The following example demonstrates the complete implementation of the approach.

Example
View Source
Edit In Stackblitz  
Change Theme:

Handling Grid Events

  1. Handle the events of the Grid which are emitted as a result of user interaction

    public dataStateChange2(state: State): void {
        this.grid2Settings.state = state;
        this.grid2Settings.gridData = process(sampleProducts, state);
        this.saveGrid2();
    }
    
    public onReorder(e: any): void {
        const reorderedColumn = this.grid2Settings.columnsConfig.splice(e.oldIndex, 1);
        this.grid2Settings.columnsConfig.splice(e.newIndex, 0, ...reorderedColumn);
        this.saveGrid2();
    }
    
    public onResize(e: any): void {
        e.forEach(item => {
        this.grid2Settings.columnsConfig.find(col => col.field === item.column.field).width = item.newWidth;
        });
    
        this.saveGrid2();
    }
  2. Save the latest state in the event handlers.

    private saveGrid2(): void {
        const grid2Config = {
        columnsConfig: this.grid2Settings.columnsConfig,
        state: this.grid2Settings.state
        };
    
        this.persistingService.set('grid2Settings', grid2Config);
    }

The following example demonstrates the complete implementation of the approach.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?