Search results

State Persistence in Angular Grid component

22 Sep 2021 / 2 minutes to read

State persistence refers to the Grid’s state maintained in the browser’s localStorage even if the browser is refreshed or if you move to the next page within the browser. State persistence stores grid’s model object in the local storage when the enablePersistence is defined as true.

Maintaining Custom Query in State Persistence

Grid does not maintain the query params after page load event when enablePersistence is set to true. This is because the Grid refreshes its query params for every page load. You can maintain the custom query params by resetting the addParams method in the actionBegin event.

Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { FilterService, PageService, GridComponent } from '@syncfusion/ej2-angular-grids';

    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [enablePersistence]='true' [allowPaging]='true' [allowFiltering]='true'
           height='210px' (actionBegin)='actionHandler($event)'>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
    providers: [FilterService, PageService]
export class AppComponent implements OnInit {

    public data: object[];
    public grid: GridComponent;

    ngOnInit(): void { = data;

    actionHandler() {
        this.grid.query.addParams('$filter', 'EmployeeID eq 1');

Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

 * Module
    imports: [
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [GroupService]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';


Get/Set localStorage value

If the enablePersistence property set as true, The Grid property value is saved in the window.localStorage for reference. You can get/set the localStorage value by using the getItem/setItem method in window.localStorage.

Copied to clipboard
//get the Grid model.
let value: string = window.localStorage.getItem('gridGrid'); //"gridGrid" is component name + component id.
let model: Object = JSON.parse(model);
Copied to clipboard
//set the Grid model.
window.localStorage.setItem('gridGrid', JSON.stringify(model)); //"gridGrid" is component name + component id.