Custom pagesize in ag-grid

Question

I am using ag-grid for table in my Angular 6 application. Below is my gridOptions configuration for ag-grid.

  gridOptions: GridOptions = {
    rowBuffer: 0,
    rowSelection: "multiple",
    rowModelType: "infinite",
    cacheOverflowSize: 2,
    maxConcurrentDatasourceRequests: 2,
    infiniteInitialRowCount: 1,
    maxBlocksInCache: 2
  };

As going through the documentation of ag-grid , I am unable to find custom pagesize for infinite scrolling.

My requirement is to have page size of 20 i.e

startRow = 0 and endRow = 20 and pageSize = 20 //my-requirement

What ag-grid provides is below:

startRow = 0 and endRow = 100 and pageSize = 100 //default configuration

Is there any way to change the default configuration of ag-grid .Can anyone help me in this.!

Answer 1

Use the paginationPageSize prop. Also don't forget to enable ag-grid pagination by adding pagination prop and setting it to true.

In your case the following above mentioned properties must be added as such.

gridOptions: GridOptions = {
  rowBuffer: 0,
  rowSelection: "multiple",
  rowModelType: "infinite",
  cacheOverflowSize: 2,
  maxConcurrentDatasourceRequests: 2,
  infiniteInitialRowCount: 1,
  maxBlocksInCache: 2,
  pagination: true,       // pagination properties
  paginationPageSize: 10
};

You may refer here they have given a snippet with pagination prop set to true.

Answer 2

Pagination is different & infinite block size is different, what you need to change count of later one. For that there's grid property cacheBlockSize. (it's I think not a part of GridOptions Interface, so bind it separately)

Example template code:

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    [rowData]="rowData"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [components]="components"
    [enableColResize]="true"
    [rowBuffer]="rowBuffer"
    [rowSelection]="rowSelection"
    [rowDeselection]="true"
    [rowModelType]="rowModelType"
    [paginationPageSize]="paginationPageSize"
    [cacheOverflowSize]="cacheOverflowSize"
    [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
    [infiniteInitialRowCount]="infiniteInitialRowCount"
    [maxBlocksInCache]="maxBlocksInCache"
    [cacheBlockSize] = "cacheBlockSize"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

Where you can set the values in constructor:

this.rowBuffer = 0;
this.rowSelection = "multiple";
this.rowModelType = "infinite";
this.paginationPageSize = 30;
this.cacheOverflowSize = 2;
this.maxConcurrentDatasourceRequests = 1;
this.infiniteInitialRowCount = 1000;
this.maxBlocksInCache = 10;
this.cacheBlockSize = 30;

And the onGridReady method can be like:

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => {
        var dataSource = {
          rowCount: null,
          getRows: function(params) {
            console.log("asking for " + params.startRow + " to " + params.endRow);
            setTimeout(function() {
              var rowsThisPage = data.slice(params.startRow, params.endRow);
              var lastRow = -1;
              if (data.length <= params.endRow) {
                lastRow = data.length;
              }
              params.successCallback(rowsThisPage, lastRow);
            }, 500);
          }
        };
        params.api.setDatasource(dataSource);
      });
    }

Working Example , Follow Official Docs

Answer 3

declare pagination you want in paginationpageSize

  gridOptions: GridOptions = {
    rowBuffer: 0,
    rowSelection: "multiple",
    rowModelType: "infinite",
    cacheOverflowSize: 2,
    maxConcurrentDatasourceRequests: 2,
    infiniteInitialRowCount: 1,
    maxBlocksInCache: 2
    paginationAutoPageSize: false,
    paginationPageSize : 20,
    pagination: false,
  };

you can define in onGridReady:

paginationChanged(event: PaginationChangedEvent) => {
    if (event.newPage) {
        const currentPage: number = gridOptions.api.paginationGetCurrentPage();
        if (this.data.rowData.length <= (currentPage * 10)) {
            
        }
    }
}