Is there a onScroll event for ag-grid

Question

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

Ranch

Answer 1

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;
}

Frightfully

Answer 2

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')
            }
        },

Uzia

Thanks! 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;) – Barberabarberry

Answer 3

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

Piddle

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 – Ranch

@vikasmittal it's difficult to visualize and understand your situation until you share what you have done via code. See how to create minimal reproducible example – Piddle