I am currently working on implementing server side pagination for my ag-Grid. The initial setup of the grid is done and it displays the data correctly when the page first loads. However, I have over 5000 records in the table and I want to fetch the next set of records from the server every time the user clicks on the next button. The issue I am facing is that the server is not being called when the next/previous button is clicked and I am unsure how to listen for pagination events to trigger another HTTP request.
Here are my Grid options:
this.gridOptions = <GridOptions>{};
this.gridOptions = {
enableServerSideSorting: true,
enableServerSideFilter: true,
enableSorting: true,
enableFilter: true,
enableColResize: true,
rowSelection: 'single',
rowDeselection: true,
columnDefs: this.columnDefs,
rowModelType: 'infinite',
paginationPageSize: 35,
maxConcurrentDatasourceRequests: 2,
infiniteInitialRowCount: 1,
getRowNodeId: (item: any) => {
return item.id;
},
pagination: true,
onGridReady: () => { this.gridOptions.api.sizeColumnsToFit(); },
context: { componentParent: this },//to invoke the method of this(parent) component from child component,
onRowClicked: (event: any) => { this.router.navigateByUrl(`/dataList/edit/${event.data.id}`); },
};
Data source definition:
let dataSource = {
getRows: (params: any) => {
setTimeout(() => {
let dataAfterSortingAndFiltering = this.sortAndFilter(allOfTheData, params.sortModel, params.filterModel);
let rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
let lastRow = -1;
if (dataAfterSortingAndFiltering.length <= params.endRow) {
lastRow = dataAfterSortingAndFiltering.length;
}
params.successCallback(rowsThisPage, lastRow);
}, 500);
}
};
this.gridOptions.api.setDatasource(dataSource);