Search code examples
angularjsangular-uing-grid

How to implement infinite scrolling with ng-grid

Currently, I am using ng-grid to show data in a tabular way. Also, for some tables that have rather lots of records, I am am using server-side paging to fetch the data.

I am not quite satisfied with this solution. What I would like to do is fetch more data as the scrollbar reaches the end of the window (something like the ngInfiniteScroll directive). I haven't found a way to do this with ng-grid.

So, my question is: Can this be done with ng-grid, and if yes - how? There seems to be no out of the box solution in ng-grid for this problem.

Solution

  • When the user has scrolled to the bottom of the grid this event fires. useful for infinite/server-side scrolling.

    Example:

    scope.$on('ngGridEventScroll', function () {
     //append rows to grid
});

    use this event to get notified when user scrolled to the bottom of the grid so that you can append more rows to the grid.

    Resource: https://github.com/angular-ui/ng-grid/wiki/Grid-Events