ag-Grid set filter and sort model without triggering event

Question

I am updating sort & filter models via api:

this.gridApi.setFilterModel(filterModels);
this.gridApi.setSortModel(sortModels);

The problem with this is I have a server request bound to the change even of both sort & filter so when user changes then the data is updated. This means when I change model on code like restoring a state or resetting the filters it causes multiple requests.

Is there a way to update the filter/sort model without triggering the event?

I see there is a ColumnEventType parameter but couldn't see how it works. Can I specify some variable that I can look for inside my event handlers to get them to ignore calls that are not generated from user?

I am trying to manage URL state so when url query params change my code sets the models in the grids but this ends up causing the page to reload multiple times because the onFilter and onSort events get called when the model is set and there is no way I can conceive to prevent this.

Answer 1

At the time, you are going to have to manage this yourself, ie, just before you call the setModel, somehow flag this in a shared part of your app (maybe a global variable)

Then when you react to these events, check the estate of this, to guess where it came from.

Note that at the moment, we have added source to the column events, but they are not yet for the model events, we are planning to add them though, but we have no ETA

Hope this helps

Answer 2

I had to solve similar issue. I found solution which working for my kind of situation. Maybe this help someone.

for (let j = 0; j < orders.length; j++) {
    const sortModelEntry = orders[j];
    if (typeof sortModelEntry.property === 'string') {
    const column: Column = this.gridColumnApi.getColumn(sortModelEntry.property);
    if (column && ! column.getColDef().suppressSorting) {
       column.setSort(sortModelEntry.direction.toLowerCase());
       column.setSortedAt(j);
     }
}
this.gridApi.refreshHeader();

Where orders is array of key-value object where key is name of column and value is sorting directive (asc/desc).

Set filter without refresh was complicated

for (let j = 0; j < filters.length; j++) {
   const filterModelEntry = filters[j];
   if (typeof filterModelEntry.property === 'string') {
      const column: Column = this.gridColumnApi.getColumn(filterModelEntry.property);
      if (column && ! column.getColDef().suppressFilter) {
         const filter: any = this.gridApi.getFilterApi(filterModelEntry.property);
         filter['filter'] = filterModelEntry.command;
         filter['defaultFilter'] = filterModelEntry.command;
         filter['eTypeSelector'].value = filterModelEntry.command;
         filter['filterValue'] = filterModelEntry.value;
         filter['filterText'] = filterModelEntry.value;
         filter['eFilterTextField'].value = filterModelEntry.value;
         column.setFilterActive(true);
      }
   }
}

Attributes in filter:

• property - name of column
• command - filter action (contains, equals, ...)
• value - value used in filter

Answer 3

For anyone else looking for a solution to this issue in Nov 2020, tapping into onFilterModified() might help. This gets called before onFilterChanged() so setting a value here (eg. hasUserManuallyChangedTheFilters = false, etc.) and checking the same in the filter changed event is a possible workaround. Although, I haven't found anything similar for onSortChanged() event, one that gets called before the sorting is applied to the grid.