How to implement infinite scrolling with ng-grid

Question

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 1

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

Answer 2

Here is the example of the ng-Grid with infinite scroll using "ngGridEventScroll" events. supports group by filter and sort.

Example: http://plnkr.co/edit/AY68jf?p=preview

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {

    $scope.currentDataPosition = 1;
    $scope.lastScrollPosition = 0;
    $scope.mySelections = [];
    $scope.myData = [{EmployeeName:"David", Emailaddress:"[email protected]", Technology:"MVC"},
                     {EmployeeName:"Christina",  Emailaddress:"[email protected]",  Technology:"MVC"},
                     {EmployeeName:"Peter",  Emailaddress:"[email protected]",  Technology:".Net"},
                     {EmployeeName:"Jhon", Emailaddress:"[email protected]", Technology:"SP"},
                     {EmployeeName:"Michel",   Emailaddress:"[email protected]",   Technology:"SP"},
                     {EmployeeName:"Mark",   Emailaddress:"[email protected]",   Technology:"MVC"},
                     {EmployeeName:"Reobert",Emailaddress:"[email protected]",Technology:".Net"}

                    ];

    $scope.gridOptions = 
        { 
        data: 'myData',
        columnDefs: [ 
                      {field:'EmployeeName', displayName:'Employee Name' ,width:'150px'},
                      {field:'Emailaddress', displayName:'Email Address',width:'200px'},
                      {field:'Technology',   displayName:'Technology',width:'100px'}
                    ],
        groups :['Technology'],
        groupsCollapsedByDefault: false,
        showSelectionCheckbox: true,
        selectWithCheckboxOnly: false,
        selectedItems: $scope.mySelections,
        //multiSelect: true,
        //filterOptions: {filterText: '', useExternalFilter: false},
        //showColumnMenu: true,
        //showFilter: true,
        };

     $scope.GetMoreData = function(position)
     {
        if(typeof(position) == 'undefined')
        {
            position = 0;
        }
        for (var i = 1 ; i < 31 ; i++)
        {
          var dep = "MVC";

          if(i % 3 == 0)
          {
            dep = "Consult";
          }
          else if (i % 5 == 0)
          {
            dep = "Audit";
          }
          else if (i % 7 == 0)
          {
            dep = "Audit";
          }
          else if (i % 4 == 0)
          {
            dep = ".Net";
          }

          var vPos = '('+position+')-' + i;
          var name = "Employee"+vPos;
          var email = name + "@abccompany.com";
          var employee = {EmployeeName:name,Emailaddress: email,Technology:dep}
          $scope.myData.push(employee);
        }
     }


     $scope.$on('ngGridEventScroll', function () 
     {
      var ngGridView = $scope.gridOptions.ngGrid.$viewport[0];
      var scrollTop = ngGridView.scrollTop;
      var scrollOffsetHeight = ngGridView.offsetHeight;
      var currentScroll = scrollTop + scrollOffsetHeight;
      var scrollHeight = ngGridView.scrollHeight;
      console.log(scrollTop);
      console.log(scrollHeight);

      $scope.currentDataPosition++;
      $scope.isLoading = true;
      $scope.GetMoreData($scope.currentDataPosition);
      $scope.isLoading = false;
      console.log('Scrolled .. ');
     });

     $scope.GetMoreData(1);                 
});