Ag-grid Server side pagination / filter / sort data

Question

I'm trying to implementing a server side request for pagination / filter / sort data but the documentation is very confused.

The example provides in the infinite row model (https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination) uses a .json file for this. This example loads the entire .json file from a server and then use client functions (sortAndFilter(), sortData(), filterData()) for sort and filter. This is not the server side, it's client side, because all data are fully loaded from the server. If this file has 1Gb of data?

In the real world scenario we don't load all data from the server (like the example does loading the entire json file). We made a request to the server each time the user clicks next page, passing parameters for page/filter and sort data, and loading this filtered/sorted data and then display in the grid.

What I am missing? Does Ag-grid do this different or I'm completly lost? Any simple example with mock server will help a lot.

There is some support tickets opened and closed (#2237, #1148 ...) without clarification. I hope that someone makes this clear.

I am also stuck at this thing and unable to figure out how it could be done, were you successful in doing the real type of server-size pagination with infinite scrol? — Muneeb Mirza
@MuneebMirza check the solution below. These give you a good example how the server side pagination works — Joel
I have same things setup. I actually missed setting lastRow properly at backend, which i think is same as totalRecords. It seems to work now. — Muneeb Mirza

Roman Skydan Roman Skydan · Accepted Answer · 2018-11-28T22:55:49

You need to realize data source object. Where you need to specify the method for getting data. And then set this data source object using grid API.

app.component.html:

<div style="display:flex; width:100%; height:100%; flex-direction:column; position:absolute;">

  <div style="flex-grow:0">
    <p>{{ info }}</p>
  </div>

  <div style="flex-grow:1; height: 1px;">
    <ag-grid-angular style="width: 100%; height: 100%" class="ag-theme-balham"
                      [gridOptions]="gridOptions"
                      [columnDefs]="columnDefs"
                      (gridReady)="onGridReady($event)"
                      #grid
    ></ag-grid-angular>
  </div>

</div>

app.component.ts

import { Component, HostListener, Input, ViewChild } from '@angular/core';
import { GridOptions, IDatasource, IGetRowsParams, ColDef } from 'ag-grid';
import { AgGridNg2 } from 'ag-grid-angular';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {

  public columnDefs: any[];
  public rowData: any[];
  public gridOptions: any;
  public info: string;
  @ViewChild('grid') grid: AgGridNg2;

  constructor() {
    this.columnDefs = [
      { headerName: 'One', field: 'one' },
      { headerName: 'Two', field: 'two' },
      { headerName: 'Three', field: 'three' }
    ];

    this.gridOptions = {
      rowSelection: 'single',
      cacheBlockSize: 100,
      maxBlocksInCache: 2,
      enableServerSideFilter: false,
      enableServerSideSorting: false,
      rowModelType: 'infinite',
      pagination: true, 
      paginationAutoPageSize: true
    };

  }


    private getRowData(startRow: number, endRow: number): Observable<any[]> {
      //this code I'm included there only for example you need to move it to 
      //service
      let params: HttpParams = new HttpParams()
          .append('startRow', `${startRow}`)
          .append('endRow', `${endRow}`);

      return this.http.get(`${this.actionUrl}/GetAll`, {params: params})
          .pipe(
              map((res: any) => res.data)
          );
    }

    onGridReady(params: any) {
      console.log("onGridReady");
      var datasource = {
        getRows: (params: IGetRowsParams) => {
          this.info = "Getting datasource rows, start: " + params.startRow + ", end: " + params.endRow;

          this.getRowData(params.startRow, params.endRow)
                    .subscribe(data => params.successCallback(data));

        }
      };
      params.api.setDatasource(datasource);

    }

}

This is a rough example of your data source for a grid.

Ag-grid Server side pagination / filter / sort data

1 Answers