Angular kendo-grid-State directive

Purpose

A helper library that implements a directive to manage grid state during session or between sessions for @Progress Kendo UI for Angular Grid.

Features

• State persistence is managed entirely in the directive.
• State storage can be session, local or custom. Defaults to session.
• Persists expanded rows.
• Persists column visibility.
• Persists column resize.
• Persists column reorder.
• Persists grid sort, page, page size, group, filter etc..

How to use

Install

Install the Angular library with NPM:

    npm install --save @lucasheight/kendo-grid-state

Using the library

To enable grid state, import the module GridStateModule, add the directive to the grid, provide a unique key for this grid e.g. gridState="ANiceGrid". By default the state is stored in browser sessionStorage, this can be overiden by changing the APP_STORAGE provider (See below) :

@NgModule({
  declarations: [AppComponent, GridServiceComponent, GridDirectiveComponent],
  imports: [BrowserModule, BrowserAnimationsModule, CommonModule, HttpClientModule, GridModule, GridStateModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

<kendo-grid
  gridState="ANiceGrid"
  (stateReady)="onGotState($event)"
  [data]="data$ | async"
  [pageable]="{
    buttonCount: 5,
    info: true,
    type: 'numeric',
    pageSizes: true,
    previousNex: true
  }"
  [loading]="loading"
  [pageSize]="gridState.take"
  [filter]="gridState.filter"
  [groupable]="false"
  [group]="gridState.group"
  [sortable]="true"
  [skip]="gridState.skip"
  [sort]="gridState.sort"
  [filterable]="true"
  [resizable]="true"
  [reorderable]="true"
  [columnMenu]="true"
  (dataStateChange)="onStateChange($event)"
>
  <kendo-grid-column field="ProductName"></kendo-grid-column>
  <kendo-grid-column field="SupplierID" filter="numeric"></kendo-grid-column>
  <kendo-grid-column field="QuantityPerUnit"></kendo-grid-column>
</kendo-grid>

In the component handle the stateReady event.

  loading: boolean = false;
  gridState: State = { skip: 0, take: 5 };
  data$: Observable<GridDataResult>;
  onGotState = (e: State): void => {
    this.onStateChange(e as DataStateChangeEvent);
  };
  public onStateChange = (e: DataStateChangeEvent): void => {
    this.loading = true;
    this.gridState = e;
    this.service.query(toODataString(e));
  };

Changing Gridstate storage provider

To change the application storage for all grids in your application, add the APP_STORAGE provider in the app module:

For example, this module sets the provider to use localStorage instead of the default sessionStorage.

@NgModule({
  declarations: [AppComponent, GridDirectiveComponent],
  imports: [BrowserModule, BrowserAnimationsModule, CommonModule, HttpClientModule, GridModule, GridStateModule],
  providers: [{ provide: APP_STORAGE, useFactory: () => localStorage }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Custom storage providers

To implement your own custom storage provider, implement the Storage interface. Then add your factory to the provider. E.g:

export const CustomStorage: Storage = {
  length: undefined,
  clear(): void {
    throw new Error("Method not implemented.");
  },
  getItem(key: string): string {
    return "hello custom storage";
  },
  key(index: number): string {
    return "hello from custom storage";
  },
  removeItem(key: string): void {
    console.log("remove custom storage", key);
  },
  setItem(key: string, value: string): void {
    console.log("set custom storage", key);
  }
};
@NgModule({
  declarations: [AppComponent, GridDirectiveComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    HttpClientModule,
    GridModule,
    GridStateModule,
  ],
  providers: [{ provide: APP_STORAGE, useFactory: () => CustomStorage }],
  bootstrap: [AppComponent],
})

A demo can be found on stackblitz here.