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.

Have a look at this: github.com/ag-grid/ag-grid-enterprise-mysql-example/blob/master/… . In the ag-grid example, they are mimicking server call with timeout. Check the link I've provided, use ajax to call the server, inside dataSource.getRows method. Assign the dataSource object to ag-grid. — Paritosh
Also, See How to Ask, and especially minimal reproducible example. The idea is you describe what you want to do, show what you tried, and tell us what results you get. — Paritosh
It is a valid question, also above link is for ag-grid-enterprise but i guess the questioner is using ag-grid-community. Why the data is loaded beforehand? in network there are no multiple calls going back and forth between ui and sever which we would expect in server side pagination. — NeverGiveUp161

Ash Ash · Accepted Answer · 2018-12-18T16:43:55

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();

  }

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

1 Answers