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