Ag-grid React: Pre-set Filters in Datasource for Infinite Row Model

Question

Using infinite row model, with sorting and filtering.

As per the documentation, I have handled both sorting and filtering from server-side. Datasource is called every-time i change sort/filter model. But I cannot pre-set the filter model for when its first loaded into the grid. The can't send the initial filter model to the server.

const dataSource = {
            rowCount: null,
            getRows: params => {
                    const sortedFilteredData = requestRows(data, params.sortModel, params.filterModel);
                    const rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
                    const lastRow = -1;
                    if (dataAfterSortingAndFiltering.length <= params.endRow) {
                        lastRow = dataAfterSortingAndFiltering.length;
                    }
                    params.successCallback(rowsThisPage, lastRow);
            }
        };

When the datasource is first called the filterOptions is {}.

I have tried setting the model at onGridReady() using api.setFilterModel() but it throws error that we can use setFilterModel with infinite row model type.

user1015196 user1015196 · Accepted Answer · 2020-05-15T05:39:17

I'm not sure which version of ag-grid you are using but you can initialize the filter the problem however is that it will make 2 calls to your datasource when doing so. I started experiencing this after upgrading from v20.0 to v23.1. The code looks like this:

    // InitialFilter is just a prop I pass into my grid
    InitialFilter: (params) => {
        let filterComponent = params.api.getFilterInstance("<Your Field Name>");
        filterComponent.setModel({
            type: "greaterThan",
            filter: 0
        });
        params.api.onFilterChanged();
    }

I set this in my onGridReady function:

    onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;

        // initialFilter prop is set here
        if (this.props.initialFilter) {
          this.props.initialFilter(params);
        }
        params.api.setServerSideDatasource(this.dataSource(params));
    }

Additionally, it appears after upgrade to 23.1.0 that if you filter on the same field you set the initial filter on it will do 2 calls to your datasource. There was an issued opened GitHub Issue 1785 on this but then closed. Others have provided workarounds but they are all in Angular so I'm trying to figure out how I can do it in React. Hope this helps and if you figure out a workaround in React let me know. :)

Ag-grid React: Pre-set Filters in Datasource for Infinite Row Model

1 Answers