aggrid server side paging 'cannot get grid to draw rows when it is in the middle of drawing rows'

Question

I have a aggrid component like this:

  private gridOptions = {
    columnDefs: this.columnDefs,
    frameworkComponents: { buttonRenderer: ButtonRenderer},
    pagination: true, 
    paginationPageSize: 20,
    cacheBlockSize: 20,
    // server side paging
    rowModelType: 'infinite',
    datasource: this.dataSource
   };

  private dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {
      var query = { startrow: params.startRow,
                    endrow: params.endRow,
                    company_name: this.companyName,
                    company_address: this.companyAddress,
                    company_capital: this.companyCapital
                  };
      this.http.post(environment.api_url + "/register/search",query).subscribe((results:any) => {
        params.successCallback(results.data, results.totalRecords);
        this.gridApi.refresh();
      });            
    }
  };

When aggrid first loaded, it shows normally. If I press next page, I got this error:

ERROR Error: "ag-Grid: 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, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace."

Is there any example to reference? I searched around but everyone seems doing fine without this problem.

BTW: I am using angular 8,aggrid 22.1.1

I'm guessing that you shouldn't be calling the grid's refresh() method after you call the successCallback, which probably is also triggering a refresh. If you really do need to call refresh(), try doing it in a setTimeout() — GreyBeardedGeek
Thanks for your answer. It's a valueFormatter problem for me. If I remove valueFormatter from column definition, everything works fine. When I check chrome console, I saw formatter function got undefine for cell value.I dont know how to fix it, so I remove all valueFormatter. Everything work great after that. — Vincent Chen
One tip - I found that functionsthat the component exposes to the grid (valueGetters, valueSetters, valueFormatters, etc) must be Lambdas ("fat arrow functions"), not just normal methods of the component. A Lambda has "this" bound to it, while a normal method does not. — GreyBeardedGeek
I'm also having this problem with agGrid 24.1, and my Angular code doesn't have any valueFormatter or calls to refresh(). I have a master grid with two-level detail grids, and if I expand / contract just a few rows, leaving a healthy pause between clicks, I still get this error.... I've no idea why. — Mike Gledhill

noam7700 noam7700 · Accepted Answer · 2020-11-09T18:46:43

as stated in @Vincemt Chen comment

Thanks for your answer. It's a valueFormatter problem for me. If I remove valueFormatter from column definition, everything works fine. When I check chrome console, I saw formatter function got undefine for cell value.I dont know how to fix it, so I remove all valueFormatter. Everything work great after that.

It happened to me as well, so instead of removing valueFormatter which is useful, I added checking if params.value is undefined. for example:

{
    headerName: "first cell",
    field: "first field",
    valueFormatter: (params) => {
        if(!params.value) return 'ERROR';

        ...your original code...
    }
}

aggrid server side paging 'cannot get grid to draw rows when it is in the middle of drawing rows'

1 Answers