Pivot Grid State Persistence

Ignite UI for Angular Pivot Grid component provides the IgxGridState directive which allows developers to easily save and restore the grid state. When the IgxGridState directive is applied on the grid, it exposes the getState and setState method, that developers can use to achieve state persistence in any scenario.

API

getState - This method returns the grid state in a serialized JSON string, the easisest way to enable developers just take it and save it on any data storage (database, cloud, etc). Once the developer needs to restore this state, just pass it back to the setState method. The first optional method parameter is serialize, which determines whether getState will return the original objects, or the serialized JSOn string. The developer may choose to get only the state for a certain feature/features, by passing in the feature name, or an array with feature names as a second argument.

// get all features` state in a serialized JSON string
const gridState = this.state.getState();

// get all features original state objects, as returned by the grid public API
const gridState = this.state.getState(false);

// get the sorting and filtering expressions
const sortingFilteringStates = this.state.getState(false, ["sorting", "filtering"]);

setState - The setState method will accept the serialized JSON string or an object implementing the IGridState interface as argument and will restore the state of each feature found in the object/JSON string. Internally the IgxGridState directive works with the public grid API, so it does not abstract away anything that cannot be done from the application itself. Instead, if wraps the API for getting/setting any features properties/states in an easy to use single API.

public restoreGridState(gridState) {
    this.state.setState(gridState);
}

public restoreSortingFiltering(sortingFilteringStates: IGridState) {
    this.state.setState(sortingFilteringStates)
}

options - The options object is an object implementing the IGridStateOptions interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. If a developer has excluded certain features, then the object retrieved the getState method will not contain those features' state.

public options =  { cellSelection: false; sorting: false; }

<igx-grid [IgxGridState]="options"></igx-grid>

The usefullnes of thеse simple to use single-point API's allows you to achieve a full state persistence functionality in just few lines of code. Copy paste the code from below - it will save the grid state in the browser sessionStorage object every time the user leaves the current page. Whenever the user returns to this page, the grid is restored the same state that the user has set. No more need to configure those complex advanced filtering and sorting expressions every time to get the data you want - do it once and have the code from below do the rest for your users:

  // app.component.ts
  public ngOnInit() {
    this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
        this.saveGridState();
    });
  }

  public ngAfterViewInit() {
    this.restoreGridState();
  }

  public saveGridState() {
      const state = this.state.getState() as string;
      window.localStorage.setItem("grid1-state", state);
  }

  public restoreGridState() {
      const state = window.localStorage.getItem("grid1-state");
      this.state.setState(state);
  }

. Depending on the scenario, the state can be saved to the browser localStorage or sessionStorage object, or saved in a database, cloud, passed on to a service, etc.

Demo

Limitations

getState method uses JSON.stringify() method to convert the original objects to a JSON string. However, this does not support Functions, thats why the [IgxGridState] directive will ignore the columns formatter, filters, summaries, sortStrategy, cellClasses and cellStyles properties. It is up to the developer to keep track and restore those on application level. It is recommended to set these in the columnInit event:

// app.component.ts
public initColumns(column: IgxColumnComponent) {
    if (column.field === 'Age') {
        column.summaries = MySummary;
        column.filters = IgxNumberFilteringOperand.instance();
    }
}