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.

Solution 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.

Solution 2

ag-grid (version 10 onwards) doesn't support server side pagination. If you want to implement server side pagination, you can use pagination with infinite scrolling https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination&gsc.tab=0

Comments

[Felix]

This directed me to towards the needed info (since I'm actually using it with Vue)... Thanks!! I've noticed a tiny wrong... You say in comments that params.startRow and endRow are the start and end page, but are actually "The first row index to get" and "The first row index to NOT get" as stated in docs ag-grid.com/javascript-grid-infinite-scrolling/#getrows

[Shilpi Jaiswal]

Thanks.. it worked for me.. was stuck on same from more than a day. rowModelType: 'infinite' was missing thing for me.

[CHAVDA MEET]

is that we get ? tree data structure on server side

[Rafael Stepan]

"cacheBlockSize" fixed my problem, thank you