paginationag-gridag-grid-angular

serverSide RowModel bug with infinite loading pagination in ag-grid


I am using the serverSide rowModel in my ag-grid, and everything works fine. The grid loads the first page (or block) on loading and it keeps loading and calling the getRows() for the following pages as the grid is scrolled down.

The main problem is: when about 230 rows count as total, and 50 pages per pagination, getting to page 3, the grid starts to bug out. In the division of page 2 to page 3, the rows start to disappear, adding loading rows between the dataSource rows.

With that loading rows, comes the calling of the getRows() again for the page 2. After finishing that request, the page 2 is complete, but the page 3 starts requesting the getRows(), completing the page 3, and then starting to request page 2, and so on and on...

Visual representation of the bug


In my debugging, i found out that, if a total count of 230 rows, expecting 50 rows of pagination in the getRows(), and receiving less than that value, the grid calls the getRows() to try to retrieve all of the expecting number of rows, and it keeps going until the count is what is expected.

In theory, when loading the page 3, my request is missing values, right? No.

Every single request is getting the exact count the grid is expecting, with no invalid values.

What is happening is: the page 2 is 50 rows long, and when loading the page 3, getting 50 rows as well, the page 2 is shrank to 46 rows long, forcing the grid to do another request of getRows(). Doing that, the page 2 is completed with 50 rows long, but the page 3 is now shrank to 46 rows, making the request, completing the rows to 50, and making page 2 46 rows again.

Console printing: First page loading

> AG Grid: RowNodeBlockLoader - printCacheStatus: activePageLoadsCount = 0, 
blocks = {"0":{"blockNumber":0,"startRow":0,"endRow":50,"pageStatus":"loading","loadedRowCount":0}}

Second page loading

> getRows called
> AG Grid: RowNodeBlockLoader - printCacheStatus: activePageLoadsCount = 0, 
blocks = {"0":{"blockNumber":0,"startRow":0,"endRow":50,"pageStatus":"loaded","loadedRowCount":50},"1":{"blockNumber":1,"startRow":50,"endRow":100,"pageStatus":"loading","loadedRowCount":0}}

Third page loading

> getRows called
> AG Grid: RowNodeBlockLoader - printCacheStatus: activePageLoadsCount = 0, 
blocks = {
"0":{"blockNumber":0,"startRow":0,"endRow":50,"pageStatus":"loaded","loadedRowCount":50},
"1":{"blockNumber":1,"startRow":50,"endRow":100,"pageStatus":"loaded","loadedRowCount":50},
"2":{"blockNumber":2,"startRow":100,"endRow":150,"pageStatus":"loading","loadedRowCount":0}}

Second page loading againg (because of loadedRowCount 46)

> getRows called
> AG Grid: RowNodeBlockLoader - printCacheStatus: activePageLoadsCount = 0, 
blocks = {
"0":{"blockNumber":0,"startRow":0,"endRow":50,"pageStatus":"loaded","loadedRowCount":50},
"1":{"blockNumber":1,"startRow":50,"endRow":100,"pageStatus":"loading","loadedRowCount":46},
"2":{"blockNumber":2,"startRow":100,"endRow":150,"pageStatus":"loaded","loadedRowCount":50}}

Third page loading again (because of loadedRowCount 46)

> getRows called
> AG Grid: RowNodeBlockLoader - printCacheStatus: activePageLoadsCount = 0, 
blocks = {
"0":{"blockNumber":0,"startRow":0,"endRow":50,"pageStatus":"loaded","loadedRowCount":50},
"1":{"blockNumber":1,"startRow":50,"endRow":100,"pageStatus":"loaded","loadedRowCount":50},
"2":{"blockNumber":2,"startRow":100,"endRow":150,"pageStatus":"loading","loadedRowCount":46}}

Fourth page loading (the loops stops, but the count is still wrong, and when the page 2 is rendering, the loops starts back)

> getRows called
> AG Grid: RowNodeBlockLoader - printCacheStatus: activePageLoadsCount = 0, 
blocks = {
"0":{"blockNumber":0,"startRow":0,"endRow":50,"pageStatus":"loaded","loadedRowCount":50},
"1":{"blockNumber":1,"startRow":50,"endRow":100,"pageStatus":"loaded","loadedRowCount":46},
"2":{"blockNumber":2,"startRow":100,"endRow":150,"pageStatus":"loaded","loadedRowCount":50},
"3":{"blockNumber":3,"startRow":150,"endRow":200,"pageStatus":"loading","loadedRowCount":0}}

I already tried to scale down the pagination to 1, but the bug still happens around the pages 42 and 43. Can someone have a explanation to this, or a way to fix it?

"ag-grid-angular": "~32.0.2",
"ag-grid-community": "~32.0.2",
"ag-grid-enterprise": "~32.0.2",
Angular CLI: 18.1.4
Node: 20.16.0
Package Manager: npm 10.8.1
OS: win32 x64

grid

<ag-grid-angular
  #agGrid
  id="gridHonorario"
  class="ag-theme-alpine grid-size"
  style="height: 60vh"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  (gridReady)="onGridReady($event)"
  [detailCellRendererParams]="detailCellRendererParams"
  [sideBar]="sidebar"
  [gridOptions]="gridOptions"
  [cacheOverflowSize]="cacheOverflowSize"
  [maxConcurrentDatasourceRequests]="maxConcurrentDataSourceRequests"
  [localeText]="localeText"
  [detailRowHeight]="detailRowHeight"
  [getRowNodeId]="getRowNodeId"
  (dragStopped)="onDragStopped()"
  (columnRowGroupChanged)="onDragStopped()"
  (selectionChanged)="onSelectionChanged()"
  (detailRowOpened)="onDetailRowOpened($event)"
></ag-grid-angular>

component options

this.gridOptions = {
      headerHeight: 50,
      rowHeight: 30,
      masterDetail: true,
      rowSelection: 'multiple',
      cacheBlockSize: this.cacheBlockSize,
      paginationPageSize: this.selectedTamanhoPaginacao,
      rowModelType: 'serverSide',
      suppressServerSideInfiniteScroll: false,
      paginateChildRows: false,
      debug: true,
      localeText: {
        noRowsToShow: 'Nenhum registro encontrado.',
      },

Solution

  • So it turns out that it was a server side problem.

    My pagination was not correct, causing the pages to return repeated rows, causing the grid to remove the repeated rows, resulting in the infinite pagination.