1

I have created AG Grid with Server Side pagination using infinite rowModel and it all works fine. I have implemented page size change as well, but i am seeing a strange behavior when i change the size and i scroll down (it seems it gets the same items again and displays them)

<div class="example-header">
  Page Size:
  <select (change)="onPageSizeChanged($event)" id="page-size">
    <option value="50" selected="">50</option>
    <option value="100">100</option>
    <option value="250">250</option>
  </select>
</div>
<ag-grid-angular #customersGrid
                 style="width: 1600px; height: 800px;"
                 class="ag-theme-balham"
                 (firstDataRendered)="onFirstDataRendered($event)"
                 [rowData]="rowData"
                 [columnDefs]="columnDefs"
                 [gridOptions]="gridOptions"
                 [pagination]="true"
                 [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
                 [infiniteInitialRowCount]="infiniteInitialRowCount"
                 (gridReady)="onGridReady($event)"
                 (paginationChanged)="onPaginationChanged($event)"
>
</ag-grid-angular>

Here is the typescript code

@ViewChild(`customersGrid`) customersGrid: AgGridAngular

  gridOptions: Partial<GridOptions>;
  gridApi : any;
  gridColumnApi : any;
  columnDefs : any;
  cacheOverflowSize: number = 2
  maxConcurrentDatasourceRequests: number = 1;
  infiniteInitialRowCount: number = 2;

  rowData: Customer[] = [];
  dataSource: any;


  constructor(private customersService: CustomerService) {
    this.columnDefs = [
      { headerName: `Id`, field: `id`, sortable: true},
      {
        field: 'id',
        headerName: ``,
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: {
          label: 'Edit',
          clicked: function(field: any) {
            alert(`${field} was clicked`);
          },
        },
      },
      {
        field: 'id',
        headerName: ``,
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: {
          label: 'Delete',
          clicked: function(field: any) {
            alert(`${field} was clicked`);
          },
        },
      }

    ]

    this.gridOptions = {
      headerHeight: 45,
      rowHeight: 30,
      cacheBlockSize: 50,
      paginationPageSize: 50,
      rowModelType: `infinite`,
      frameworkComponents: {
        btnCellRenderer: BtnCellRenderer,
      }
    }
    }


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

    this.dataSource = {
      getRows: (params: IGetRowsParams) => {
        this.customersService.getCustomers(params, this.gridApi.paginationGetPageSize()).subscribe(customers => {
          params.successCallback(customers['genericModel'], customers['count'])
          console.log(customers);
        });
      }
    }

    this.gridApi.setDatasource(this.dataSource);
  }

  onPaginationChanged(params: any) {
  }

  onPageSizeChanged(event: any) {
    this.gridApi.paginationSetPageSize(event.target.value);
  }



  onFirstDataRendered(params: any) {
    params.api.sizeColumnsToFit();
  }

In the github issue i posted, there is a video of the issue https://github.com/ag-grid/ag-grid/issues/4687

NOTE: This issue only occurs when changing page size - if i start with one page size [lets say 250] and dont change it (providing that cache size is same - it works OK)

alext
  • 678
  • 1
  • 11
  • 25

1 Answers1

0

Ok, seems this solved my issue (with a modification)
Changing page and cache block size on ag-grid causes infinite loading of items

onPageSizeChanged(event: any) {
    this.gridApi.rowModel.cacheParams.blockSize = event.target.value;
    this.gridApi.gridOptionsWrapper.setProperty('cacheBlockSize', event.target.value);
    this.gridApi.paginationSetPageSize(event.target.value);
    this.gridApi.purgeInfiniteCache();
  }
alext
  • 678
  • 1
  • 11
  • 25