AG Grid infinite row model not working - cannot get grid to draw rows when it is in the middle of drawing rows

Question

When I'm using AG Grid infinite row model, I get the following error: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, e.g. instead of api.refreshView(), call setTimeout(function() { api.refreshView(); }, 0). The code I'm using for infinite scroll model is following error text recommendation:

const onGridReady = (params: any) => {
        setGridApi(params.api);
        setGridColumnApi(params.columnApi);
        if (state && params.columnApi) {
            params.columnApi.applyColumnState({ state: state as ColumnState[], applyOrder: true });
        }
        if (sortModel && params.api) {
            params.api.setSortModel(sortModel);
        }
        if (filterModel && params.api) {
            params.api.setFilterModel(filterModel);
        }

        const updateData = (data: any) => {
            const dataSource = {
                rowCount: null,
                getRows: function (params: any) {
                    setTimeout(() => {
                        let lastRow = -1;
                        if (data.length <= params.endRow) {
                            lastRow = data.length;
                        }
                        params.successCallback(data, lastRow);
                    }, 500);
                },
            };
            params.api.setDatasource(dataSource);
        }

        fetchSparepart(`${process.env.REACT_APP_API_HOST}/spareparts?startRow=${params.startRow ?? 0}&endRow=${params.endRow ?? 50}`)
            .then(res => updateData(res))
    }

                <AgGridReact
                    localeText={AG_GRID_LOCALE_RU}
                    rowBuffer={0}
                    rowSelection={'multiple'}
                    rowModelType={'infinite'}
                    paginationPageSize={50}
                    cacheOverflowSize={2}
                    maxConcurrentDatasourceRequests={1}
                    infiniteInitialRowCount={50}
                    maxBlocksInCache={10}
                    paginationAutoPageSize={true}
                    pagination={true}
                    onGridReady={onGridReady}
                    onSelectionChanged={onSelectionChanged}
                    onSortChanged={onSortChanged}
                    onFilterChanged={onFilterChanged}
                    rowClassRules={rowClassRules}
                    onRowDoubleClicked={onSelectionChanged}
                    frameworkComponents={{
                        booleanCellRenderer: booleanCellRenderer
                    }}
                    context={{
                        methodFromParent
                    }}
                >
                ....

What I'm missing here?

Answer 1

In my case, the problem was the introduction of "rowClassRules", in your case it might be a different function, but with the same reason:

The function accessed an undefined property which lead to an exception which apparently got silently caught by aggrid. I guess that way the flag, that it's currently redrawing, never got cleared and at the next iteration it detected that the rendering is still in progress, resulting in the above error.

=> Debug your callback functions, one of them is probably broken. In my case, I switched from cellClassRules to rowClassRules and missed that the "params" parameter had a different structure, i.e. a data property and no "value" accessor for each field, so I suddenly accessed undefined.