I am looking for a scroll event on ag-grid, I want to know when the scroll reaches the end and load the next set of rows, I know if you set the infinite scroll mode then ag-grid calles the getRows method, but in my application I do not get the next set of rows right away, I make a call to the server and server sends a separate message to the client with the new set of rows
3 Answers
There's a grid event called 'onBodyScroll' which you can attach an event handler to it.
This event is somewhat secret as it was not there on their GridOptions type before version 18, even though it does work.
see this comment: https://github.com/ag-grid/ag-grid-enterprise/issues/89#issuecomment-264477535
They do have this event in document tho: https://www.ag-grid.com/javascript-grid-events/#miscellaneous
BodyScrollEvent
bodyScroll - The body was scrolled horizontally or vertically.
onBodyScroll = (event: BodyScrollEvent) => void;
interface BodyScrollEvent {
// Event identifier
type: string;
api: GridApi;
columnApi: ColumnApi;
direction: ScrollDirection;
left: number;
top: number;
}

- 457
- 6
- 5

- 921
- 12
- 22
After getting in deep, I found the perfect solution to this problem.
Please note here I am used AngularJS, But very easy to understand.
onBodyScroll:function(params) {
var bottom_px = $scope.gridOptions.api.getVerticalPixelRange().bottom;
var grid_height = $scope.gridOptions.api.getDisplayedRowCount() * $scope.gridOptions.api.getSizesForCurrentTheme().rowHeight;
if(bottom_px == grid_height)
{
alert('Bottom')
}
},

- 2,418
- 25
- 27
-
1Thanks! I just had to convert `$scope.gridOptions` to `this` and threw in a `console.log(bottom_px)` and I was in business (though I ended up finding an alternate and more direct solution to what I wanted with `gridOptions['suppressScrollOnNewData'] = true;`) – nmz787 Apr 28 '22 at 20:58
You should be able to do that thing (loading the data from the server) as per below example.
First of all, define your dataSource
.
const dataSource: IServerSideDatasource = {
getRows: (params: IServerSideGetRowsParams) => this._getRows(params, [])
};
this.gridApi.setServerSideDatasource(dataSource);
Declare _getRows
method like this.
private _getRows(params: IServerSideGetRowsParams, data: any[]) {
this.gridApi.showLoadingOverlay();
service.getData(params) // the payload your service understands
.subscribe((result: any[]) => {
params.successCallback(result, -1);
params.failCallback = () => console.log('some error occured while loading new chunk of data');
this.gridApi.hideOverlay();
},
error => this._serverErrorHandler(error)
);
}
This is pretty much self-explanatory. Let's me know if anything is unclear to you.
BTW, I've used typescript
for the example, javascript
example would be kind of the same for ag-grid-react

- 11,144
- 5
- 56
- 74
-
As I mentioned in my question, I cannot use getRows(infinite scroll mode) because the client talks to server using websocket and the response comes at a later time, I am looking for a event that is fired when the user scrolls to the end of the grid – vikas mittal Mar 13 '19 at 13:22
-
@vikasmittal it's difficult to visualize and understand your situation until you share what you have done via code. See how to create [mcve] – Paritosh Mar 13 '19 at 15:58