ag-Grid server side pagination events

Question

I would like to do server side pagination in my ag-Grid. I have successfully implemented the grid and displayed specific data when first time page loads. I have more than 5000 records in my table and every time when I hit next button I need to call server to get next records in my grid. But, I don't know how to listen pagination events to make another http request. My server doesn't get hit when I click next/previous button.

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 defination:

let dataSource = {
        getRows: (params: any) => {
            setTimeout(() => {

                let dataAfterSortingAndFiltering = this.sortAndFilter(allOfTheData, params.sortModel, params.filterModel);
                let rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
                // if on or after the last page, work out the last row.
                let lastRow = -1;
                if (dataAfterSortingAndFiltering.length <= params.endRow) {
                    lastRow = dataAfterSortingAndFiltering.length;
                }

                params.successCallback(rowsThisPage, lastRow);
            }, 500);
        }
    };
    this.gridOptions.api.setDatasource(dataSource);

Ngoc Nam Nguyen Ngoc Nam Nguyen · Accepted Answer · 2018-01-03T22:58:13

This is a note from Aggrid doc:

In v9.0 ag-Grid pagination changed from server side pagination to client side pagination. Server side pagination was then removed in v10.1. If you were doing server side pagination, we recommend moving to pagination with infinite scrolling as a way of migration to the new mechanism. If you were slicing manually the data in your Datasource to mimic pagination done in the browser only, we recommend that you use the default In Memory Row Model and set the row data as normal and then set grid property pagination=true.

I think you can listen to paginationChanged event and make api call then call setData.

Hope it helps.

ag-Grid server side pagination events

1 Answers