How to implement pageSize change in Infinite row Model in ag-grid?

Question

I am using ag-grid-community in angular 6. I have set suppressPaginationPanel=true and using Material paginator for handling paginator events. For row Model, I am using Infinite row model. My pagination next and previous is working correctly with server side call with below url.

https://myservice.com/clients?pageIndex=0&pageSize=5;

But my page size change is not working. I have implemented this in Material paginator pageChange event. After changing pageSize, this actually goes into infinite loop and getRows is called infinite time.

I have also tried some other options like paginationPageSizeChange(), paginationGoToFirstPage() etc. But none is working.

I require server side call each time when pageSize change or next/previous is clicked.

Could anyone please guide how to implement pageSize change with infinite row model of ag-grid?

 export class ClientsComponent implements OnInit {

      gridOptions: GridOptions = <GridOptions>{};
      gridApi: GridApi;
      columnApi: ColumnApi;
      clientQuery= {
        pageIndex: 0,
        pageSize: 5,'
      };

      columnDef = [
        {field: 'ClientName', headerName:"Cline Name", suppressMenu: true},
    {field: 'ServerName', headerName: "Server Name", suppressMenu: true},];

      @ViewChild(MatPaginator) paginator: MatPaginator;

      constructor(private service: MyService) {
      }

      ngOnInit() {
        this.gridOptions.pagination = true;
        this.gridOptions.rowModelType = 'infinite';
        this.gridOptions.paginationPageSize = 5;
        this.gridOptions.cacheBlockSize = 5;
        this.gridOptions.maxBlocksInCache = 1;
        this.gridOptions.suppressPaginationPanel = true;
        this.gridOptions.infiniteInitialRowCount = 5;
      }

      gridReady(event: GridReadyEvent){
        this.gridApi = event.api;
        this.columnApi = event.columnApi;
        event.api.setDatasource(this.dataSource);
      }

      dataSource: IDatasource = {
        rowCount: null,
        getRows: params => {
          this.service.getAllClients(this.clientQuery).toPromise().then(data => {            
              this.paginator.length = data.totalRecords;
              params.successCallback(data.items, data.totalRecords);
          })
        }
      }

      pageChange(event: PageEvent) {  //this is material paginator pageChange event
        if(event.pageSize !== this.clientQuery.pageSize){
          //this is page size change block;
          this.clientQuery.pageSize = event.pageSize;
          this.clientQuery.pageIndex = 0;
          this.gridOptions.cacheBlockSize = event.pageSize;
          this.gridOptions.paginationPageSize = event.pageSize;
          this.gridApi.paginationGoToPage(0);
        } else {
          this.clientQuery.pageIndex = event.pageIndex;
          this.gridApi.paginationGoToPage(event.pageIndex);
        }
      }

    }

Answer 1

I had the same problem and found it may be because I did a workaround with a custom datasource, to implement server-side pagination. I don't know of your reasons, but I see you made your own IDatasource object as well, so what worked for me might work for you too.

I just pasted the following snippet into my pageSizeChange function:

// Force new cache block size by resetting internal cache
this.gridOptions.api.gridOptionsWrapper.setProperty('cacheBlockSize', pageSize);
this.gridOptions.api.infinitePageRowModel.resetCache();

// After that, update the pageSize through the api
this.gridOptions.api.paginationSetPageSize(pageSize);

I found it here, submitted for a very similar issue: https://github.com/ag-grid/ag-grid/issues/2202

Hope it works for you too. Good luck!

Answer 2

This is covered in the docs here:

https://www.ag-grid.com/javascript-grid-pagination/#customising-pagination

You can see how you need to call a method to change this:

function onPageSizeChanged(newPageSize) {
    var value = document.getElementById('page-size').value;
    gridOptions.api.paginationSetPageSize(Number(value));
}

Hope this helps