AG-Grid: How to use custom filters with infinite row model

Question

I am using AG Grid Angular and would like to use custom filters in combination with the infinite row model.

The documentation of the custom filters does not mention the infinite row model, so it is not clear whether the two are compatible or not. I have implemented the "simple filter" example from the documentation and attached it to my grid, and here is what I observe:

The custom filter is properly displayed and clicking the radio button refreshes the grid.
However, the data is not modified and the doesFilterPass() method of the custom filter does not seem to ever be called (which would not make sense in the infinite row model).
My row model's datasource's getRows() method is called, but params.filterModel remains empty.

It seems to me that this almost works, except that the custom filter needs to either:

tell the grid to add a filter model that the datasource can process
or tell the datasource directly to apply a filter (this seems possible, because the filter can access the datasource via params.rowModel.datasource, but this seems like a hack)

Is there a proper way to do that, which I missed?

Shuheb Ahmed Shuheb Ahmed · Accepted Answer · 2021-07-06T14:14:58

If you are using the Infinite Row Model, the grid expects you to handle the filtering of the data yourself and return the filtered rows in the getRows callback, as documented here: https://www.ag-grid.com/angular-grid/infinite-scrolling/#sorting--filtering

Please see the following sample which shows you how to use a Custom Filter Component to Filter Rows on the Age Column: https://plnkr.co/edit/riKeOvcWdUwWioVs

Inside the getModel callback, you simply return a value / object which will be passed by the grid as request.filterModel inside getRows:

  getModel(): any {
    if (this.filterValue === 'all') {
      return null;
    } else {
      return {
        filter: this.filterValue,
        type: 'equals',
      };
    }
  }

Then inside getRows I've written some basic functionality to filter the data:

          getRows: function (params) {
            console.log(
              'asking for ' + params.startRow + ' to ' + params.endRow
            );
            setTimeout(function () {
              var dataAfterFiltering = filterData(data, params.filterModel);
              var rowsThisPage = dataAfterFiltering.slice(
                params.startRow,
                params.endRow
              );
              var lastRow = -1;
              if (dataAfterFiltering.length <= params.endRow) {
                lastRow = dataAfterFiltering.length;
              }
              params.successCallback(rowsThisPage, lastRow);
            }, 500);
          },

AG-Grid: How to use custom filters with infinite row model

1 Answers