Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ag-Grid set filter and sort model without triggering event

Tags:

ag-grid

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.

like image 248
Guerrilla Avatar asked Oct 07 '18 23:10

Guerrilla


People also ask

Does external filter pass Ag grid?

External filtering allows you to mix your own 'outside of the grid' filtering with the grid's filtering.

How do you turn off the filter on Ag grid?

Enable filtering by setting grid property enableFilter=true. This turns on filtering on all columns. To turn off filtering for particular columns, set suppressFilter=true on the individual column definition.


2 Answers

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.

like image 160
Nabakamal Das Avatar answered Oct 10 '22 16:10

Nabakamal Das


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
like image 44
Peter1982 Avatar answered Oct 10 '22 16:10

Peter1982