Update grid state in Angular-Slickgrid after grid creation

Question

What is the best way to set a saved grid state after the angular-slickgrid has already been created? The Grid State/Presets - Wiki explains setting the saved state on load by setting the gridOptions.presets. In my case, I would like to update the grid state when the underlying saved state has changed in local storage (perhaps saved from another instantiation of the app), and apply the state to the current slickgrid. If I update the gridOptions.presets, is there a method I can call to force the grid to update with the new presets?

Answer 1

Please note that I'm the author of Angular-Slickgrid.

The answer is No it's called Presets for a reason, it only works when creating the grid...but you can still do it with a few method calls. So if you really wanted to use the Grid State then you'll have to save it yourself and then reload the entire grid after applying all previous State. The Grid State that can be applied dynamically are the Filters and Sorting which you can see in Example 4 and Example 25 (with a button click or a dropdown selection like the last example). I did later add a method to change the columns as well and that one is demoed under this Slickgrid-Universal Example 11 , in fact that demo will show you exactly the way you want to do it, you can follow the code here .

for a short code sample, you'll need to get the angularGrid instance from (onAngularGridCreated) and then use it to dynamically change the grid. It shows you all the options, you can skip any of them if you don't need or want to change that option.

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
}

  // the `selectedView` should be the result of your Grid State
changeGridView(selectedView: GridState) {
  if (selectedView) {
      const columns = selectedView?.columns ?? [];
      const filters = selectedView?.filters ?? [];
      const sorters = selectedView?.sorters ?? [];
      this.angularGrid.filterService.updateFilters(filters as CurrentFilter[]);
      this.angularGrid.sortService.updateSorting(sorters as CurrentSorter[]);      
      this.angularGrid.gridStateService.changeColumnsArrangement(columns);

      // if you have a frozen grid (pinning)
      this.angularGrid.gridService.setPinning(pinning);
    } else {
      // to reset the grid
      this.angularGrid.filterService.clearFilters();
      this.angularGrid.sortService.clearSorting();      this.angularGrid.gridStateService.changeColumnsArrangement([...this.columnDefinitions].map(col => ({ columnId: `${col.id}` })));

      // if you have a frozen grid (pinning)
      this.angularGrid.gridService.clearPinning();
    }

  // you might want to scroll back to top of the grid if filters are changed
  this.angularGrid.slickGrid.scrollColumnIntoView(0);
}

You might not need to re-render the grid but in case the grid UI doesn't show correctly, you could force a re-render of the grid by invalidating all its rows

this.angularGrid.slickGrid.invalidate();