Ag-grid Angular 6 , Server side infinite scroll but get data from database every time , don't load entire query by api at one shot

Question

I am trying to implement server side pagination or Server side infinite scroll in the ag grid in the angular 6.

Like https://www.ag-grid.com/javascript-grid-infinite-scrolling/

but I don't see the API call in the network tab when we scroll in the ag-grid, so it means it does not call the API again and Again to fetch the set of rows,

but for my requirement, I need a call back to API to retrieve the first 100 rows and when we scroll -> next 100 and so on,

So, I want to pass a param as startRow and endRow to the API to fetch same from DB and then return to ag-grid. So main thing is I want to go the DB for every set of record through API as mediator.

Please help me with such a solution, it's similar to have server-side pagination that we use to do earlier days, but I want it in ag-grid.

Answer 1

I have found the solution

<ag-grid-angular rowHeight="40" style="width: 100%; height: 510px; margin: 20px" class="ag-theme-balham" [rowData]="rowData"
                class="ag-theme-balham" [columnDefs]="columnDefs" [pagination]="true"  [floatingFilter]="true" [debug]="true" [enableServerSideSorting]="true" [enableServerSideFilter]="true" [enableColResize]="true"
                [rowSelection]="rowSelection" [rowDeselection]="true" [rowModelType]="rowModelType" [paginationPageSize]="paginationPageSize" 
                [cacheOverflowSize]="cacheOverflowSize" [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests" [infiniteInitialRowCount]="infiniteInitialRowCount"
               (rowClicked)="onRowClicked($event)"  [maxBlocksInCache]="maxBlocksInCache" [getRowNodeId]="getRowNodeId" [components]="components" (gridReady)="onGridReady($event)"  [enableColResize]="true">
            </ag-grid-angular>

      dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {
      this.apiService().subscribe(data => {
        this.rowData = data;
        if (this.rowData) {
          this.columnDefs = this.generateColumns(this.rowData);
        }
        params.successCallback(data, 1000
        );
      })
    }
  }


     apiService(): any {


     return this.http.get<any>('your Get request Url with the parameters example param.startRow , param.endRow')

  }

      onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridColumnApi.rowHeight = 50;
    this.gridApi.sizeColumnsToFit();
    this.gridApi.setDatasource(this.dataSource)

    this.autoSizeAll();

  }