Persisting the State of the Grid

Environment

Description

How can I persist the state and column configuration of the Kendo UI for Angular Grid?

Solution

To persist the state and column configuration of the Kendo UI Grid for Angular, or load its previously stored settings, use either of the following approaches:

• Use the dedicated methods
• Handle the events of the Grid

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.

   Copy Codepublic saveGridSettings(grid: GridComponent): void {
       const columns = grid.columns;
   
       //add only the required column properties to save local storage space
       const gridConfig = {
           state: this.grid1Settings.state,
           columnsConfig: columns.toArray().map(item => {
               return <ColumnSettings> {
               field: item["field"],
               width: item["width"],
               _width: item["_width"],
               title: item["title"],
               filter: item["filter"],
               format: item["format"],
               filterable: item["filterable"],
               orderIndex: item["orderIndex"]
               };
           })
       };
   
       this.persistingService.set('gridSettings', gridConfig);
   }

   Copy Codeconst 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.

   Copy Code<button
           kendoButton
           *ngIf="savedStateExists"
           (click)="grid1Settings = mapGridSettings(persistingService.get('gridSettings'))">Load saved state</button>

   Copy Codepublic 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.

Handling Grid Events

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

   Copy Codepublic 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.

   Copy Codeprivate 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.