agSetColumnFilter was getting error for server side pagination

Question

agSetColumnFilter was getting error for server side pagination as "Set Filter cannot initialise because you are using a row model that does not contain all rows in the browser. Either use a different filter type, or configure Set Filter such that you provide it with values".

I had specified

enableServerSideSorting: true,
enableServerSideFilter: true,
rowModelType: 'infinite' 

and added

filter: "agSetColumnFilter". 

But still I was getting the error.

How to overcome from this issue(In react application)?

Answer 1

When you use rowModelType = "infinite" ag-grid's set filter does not work. If you want to use serverside pagination you need to set rowModelType = "serverSide". So you have to use simple column filters Text Filter, Number Filter or Date Filter.

Set the filter value text in column definition. e.g.

this.state = {
      columnDefs: [{
        field: 'AtheleteName',
        filter: 'text'
      },
      {
        field: 'Age',
        filter: 'number'
      },
      {
        field: 'Date',
        filter: 'date'
      }]
}

Ref - Provided simple filters Server side operations

Answer 2

You can use the set filter with server side data, but you have to implement the datasource by supplying a values function to your filterParams see docs.

An example of how to achieve this can be found here

const gridOptions = {
    columnDefs: [
        {
            filter: 'agSetColumnFilter',
            filterParams: {
                values: params => {
                    // async update simulated using setTimeout()
                    setTimeout(() => {
                        // fetch values from server
                        const values = getValuesFromServer();
                        // supply values to the set filter
                        params.success(values);
                    }, 3000);
                }
            }
        }
    ]
}