11

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.

lolplayer101
  • 2,112
  • 2
  • 17
  • 26

2 Answers2

4

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();
Tim
  • 81
  • 5
  • Thanks for the information. I am facing another issue after making the changes suggested by you. I have an option for changing the page size. When I change the size multiple calls for getrows are fired. Any suggestion to prevent the multiple calls to get rows method – Deepak Aug 11 '21 at 15:57
  • this worked for me, when changing page size from 50 to 250, i was getting the same items loaded (due to the initial cache size being defined as 50). Thanks a lot @Tim – alext Sep 26 '21 at 22:06
  • @Deepak I am also facing the same issue that multiple calls for getrows are fired. Did you get any solution on this. – Mohan Apr 22 '22 at 06:01
1

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);
}
Meysam Sahragard
  • 304
  • 2
  • 4