angular - AG Grid Pagination with Infinite Scrolling


Keywords:angular 


Question: 

I'm implementing ag-grid on angular 4 and having issues with the server side pagination.

Is there a way to go to a particular page on grid ready event while implementing the Pagination with Infinite Scrolling?


1 Answer: 

When you say particular page with infinite scrolling, I assume you want to reach at particular scroll position.

Let say, at once, you are fetching 20 records from server (you getRows method is also fetching the same number of records), and you want to 50th record when the grid is loaded.

Follow below steps.

// #1  initialize grid with empty array, getRows will fetch the records
let dataSource = {
  rowCount: null,
  getRows: (params: IGetRowsParams) => this.getRows(params, [])
};
this.gridApi.setDatasource(dataSource);


// #2.
private getRows(params: IGetRowsParams, data: any) {
    this.yourSvc.getRows(serverParams, params.startRow)
        .subscribe((result: any[]) => {

             params.successCallback(result, null);

             // #3. keep a flag just to make sure its done for the first time only
             if(this.isFirstTime) {
                this.gridApi.ensureColumnVisible(0);
                this.gridApi.ensureIndexVisible(50);
                this.gridApi.setFocusedCell(50, 0, null);

                this.isFirstLoad = false;
             }
        });
}