CODEWITHSUNDEEP
angularag-gridinfinite
Vincent Chen
Vincent Chen

Reputation: 265

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

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

Upvotes: 10

Views: 25773

Answers (4)

Tharindu Krishan
Tharindu Krishan

Reputation: 177

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' };
        },

Upvotes: 0

Tharindu Krishan
Tharindu Krishan

Reputation: 177

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.

Upvotes: 0

Artur Carvalho
Artur Carvalho

Reputation: 7167

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.

Upvotes: 2

noam7700
noam7700

Reputation: 473

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

Upvotes: 14

Related Questions