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

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.

Continue reading...