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 to do 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, Mar 18 '20 at 01:47
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, Mar 19 '20 at 01:25
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, Mar 19 '20 at 03:05
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, Dec 02 '20 at 08:43

noam7700 · Answer 1 · 2022-09-13T07:12:33.277

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...
    }
}

score 2 · Answer 2 · answered Feb 08 '23 at 08:21

I had the same issue with a valueGetter in a very specific scenario where it would only happen if the column was not visible from the start and it would show the error if I tried to sort the column.

The fix:

valueGetter: (params) => {
  if (params?.data === undefined) return "...";

  // original code
},

So there's a moment there where the cell shows "...". This happened to me with ag-grid on vue, so it's probably an issue on all UI libraries/frameworks.

score 0 · Answer 3 · answered May 20 '23 at 09:42

I got the same issue. I was using cell renderer and forgot to add the dynamically showing component(declare in framework components) under the module's entry components. So always make sure to add cell render components under the entry component section of the angular module.

score 0 · Answer 4 · answered May 29 '23 at 09:47

I got the same issue. The root cause was occurring from the cellStyle function.

 cellStyle: (params) => {
      return (params.data.isDeleted === false) ? { textAlign: 'center' } : { 'pointer-events': 'none', 'display': 'none' };
    },

The solution is always to check the null for params.data.

cellStyle: (params) => {
          return (params.data && params.data.isDeleted === false) ? { textAlign: 'center' } : { 'pointer-events': 'none', 'display': 'none' };
        },

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

4 Answers4

Linked