Changing page and cache block size on ag-grid causes infinite loading of items

Question

I wish to refetch the data for each page using the 'server-side' mode of ag-grid. In order to do so i made the maxBlocksInCache 1 and the cacheBlockSize equal to the items per page. Until here it works fine.

Now when i change the number of items per page, the grid starts to loop on itself by fetching the data. I'm assuming this is because the cacheBlockSize is not changeable or changes after the refetching attempt of the rows (which never finish).

now i have tried to put the cache as input instead of an agGridOption but it changed nothing.

<select #paginationSelect (change)="onPageSizeChanged(paginationSelect.value)" [(ngModel)]="itemsPerPage">
    <option [value]="item">2</option>
    <option [value]="item">10</option>
</select>
<ag-grid-angular
        [gridOptions]="gridOptions"
        [cacheBlockSize]="itemsPerPage"
        style="width: 100%; height: 250px;">
</ag-grid-angular>

this.gridOptions = {
            ...
            rowModelType: 'serverSide',
            pagination: true,
            paginationPageSize: this.itemsPerPage, // itemsPerPage is a class attribute attached to a select element using ngModel.
            maxBlocksInCache: 1,
            ...
}

// function called on change of select element value representing the number of items to display per page
onPageSizeChanged(newPageSize) {
        this.gridApi.paginationSetPageSize(newPageSize);
    }

I want to be able to change the page items size dynamicaly wbhile keeping the refetching of the data on page change.

Answer 1

None of the answers I've come across seem to work in the latest versions of ag-grid.

What worked for me was making sure to set both the cacheBlockSize and the block size in the cacheParams, in addition to setting the new page size. Both of these variables are private so there's no guarantee this will keep working, but ag-grid doesn't give you any official way to change the page size with an infinite row model. Make sure to use <any> as the type for the gridOptions or gridApi so typescript will allow you to access private members:

const gridOptions: any = this.gridOptions;
gridOptions.api.gridCore.rowModel.cacheParams.blockSize = pageSize;
gridOptions.api.gridOptionsWrapper.setProperty('cacheBlockSize', pageSize);
gridOptions.api.paginationSetPageSize(pageSize);
gridOptions.api.purgeInfiniteCache();

Answer 2

I also have the same problem and use a trick to solve it. I set the value of the cacheBlockSize to the maximum value of the page selector. Now, if we assume that the maximum value of the page selector is equal to 100 and the selected page size is equal to 10, first we get 100 rows and when the page index reaches 11 we get the next 100 rows and pagination works properly. Although, we cannot receive each page separately this way.

<div class="page-size-selector">
  Page Size:
  <select (change)="onPageSizeChanged($event)" [ngModel]="pageSize">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>
</div>


pageSize = 10;
blockSize = 100;

this.gridOptions = {
rowModelType: 'serverSide',
serverSideStoreType: ServerSideStoreType.Partial,
paginationPageSize: this.pageSize,
cacheBlockSize: this.blockSize,
pagination: true,
animateRows: true,
domLayout: 'autoHeight',
 };


onPageSizeChanged(event: any): void {
  this.pageSize = Number(event.currentTarget.value);
  this.gridApi.paginationSetPageSize(this.pageSize);
}