Saving ag-grid filter model across page reloads

Question

I have an ag-grid with infinite scroll and data retrieved from an IDatasource.

What I'm trying to do is to save the filter model to session storage when it changes, and then load it and apply it when the grid is reloaded, i.e. when the user leaves the page and then comes back.

I have an onFilterChanged event handler that does

onFilterChanged(params) {
    sessionStorage["myFilters"] = JSON.stringify(this.gridApi.getFilterModel());
}

And what I'm trying to do is

onGridReady(params) {
    this.gridApi = params.api;    
    setTimeout(() => {      
      if(sessionStorage["myFilters"] !== undefined) {
        const filters = JSON.parse(sessionStorage["myFilters"]);

        this.gridApi.setFilterModel(filters);        
      }
      this.gridApi.setDatasource(this.myDataSource);      

    }, 0);
  }

However, even if the JSON saved to session storage is correct, when getRows is invoked on my IDatasource, its filterModel param has empty values for the filters:

Does this have to do with the fact that my filter is a set filter and the values for the set are loaded dynamically from another API endpoint?

Is there a way to do this?

Raibaz Raibaz · Accepted Answer · 2021-04-27T14:50:07

Turns out I had a bug in my set filter, which was not implementing setModel and getModel properly; the solution was to store the value of the filter in the filter component itself when calling setModel and to check against it when calling getModel:

  getModel() {
    return {
      filter: this.items
        .filter((item) => item.checked || item.name === this.selected)
        .map((item) => item.name)
        .join(),
    };
  }

  setModel(model: any): void {
    if (model && model.filter) {
      this.selected = model.filter.name || model.filter;
    }
  }

This way the filter is able to compare the value retrieved from sessionStorage against the existing items, and it works as expected.

Saving ag-grid filter model across page reloads

1 Answers