How to implement infinite scrolling with ng-grid

angularjs angular-ui ng-grid
zszep picture zszep · Mar 24, 2014 · Viewed 8.1k times · Source

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.

Answer

Alex Choroshin picture Alex Choroshin · Mar 24, 2014

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

Related questions

How to hide column in ng grid

here is my code: index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" type="text/css" href="http://…

Read More
insert ng-click event into ng-grid

i want to do something that i don't know if it is possible HTML <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title&…

Read More
Turnoff Scrolling within Angular UI ng-grid?

We would like to use the Angular UI ng-grid, but can't seem to find an option to tell the viewport within the grid to not set the overflow to auto and not scroll. What we'd like to do is have …

Read More