Ag grid Server side pagination

Question

I'm trying to implement a server side pagination in ag-Grid where I'll make a SOAP call each time I click on the next/previous button. I have already implemented the function with the specific page number so I can retrieve my row data and pass it to the Grid. Any good examples on how to do that? Thanks in advance.

Answer 1

After digging ag-grid Library for the whole day , I finally found the solution.

First Lets include the following options in our GridOptions;

GridOptions :

  gridOptions: GridOptions = {
    pagination: true,
    rowModelType: 'infinite',
    cacheBlockSize: 20, // you can have your custom page size
    paginationPageSize: 20 //pagesize
  };

GridReady CallBack

After the Grid is ready, Set a datasource e.g

onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource
  } 

Data Source Object : dataSource object is called by ag-grid when you go to next page and thus fetches data.

getRows functions provides you with start and end index of the particular page.

params.successCallback : It takes two arguments, first the data related to page and second is totalRecords. Ag-grid uses the second parameter to decide total pages.

dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {

      // Use startRow and endRow for sending pagination to Backend
      // params.startRow : Start Page
      // params.endRow : End Page

      //replace this.apiService with your Backend Call that returns an Observable
      this.apiService().subscribe(response => {

        params.successCallback(
          response.data, response.totalRecords
        );

      })
    }
  }

Example Api Service : This is an example api service that i have used

apiService() {
    return this.httpclient.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json')
  }

I have uploaded this example on GitHub.