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.

Vogel

ditch ng-grid and integrate ngInfiniteScroll in your own table? – Gosport

@Eliran Malka. Integrating ngInfiniteScroll in my own table would certainly be a way to go. But, why lose all the functionality of ng-grid? – Vogel

Tables in Angular are super easy even without ng-grid (maybe easier in my opinion). I don't think you lose a whole lot by ditching ng-grid, especially if you are also ditching pagination. – Dewees

you can also try and decorate the ng-grid's ngViewport. – Gosport

I know the question is answered, but you could have used ng-table combined with ngInfiniteScroll, here is an example: 4dev.tech/2015/10/tutorial-ng-table-with-infinite-scroll – Mansuetude

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

Dwelling

oh wow, i was over-complicating stuff with the idea about decorating. this is much more simple and elegant. – Gosport

Well, I read the whole ng-grid api documentation and did not find the ngGridEventScroll event. I will certainly try this. If it works, then I wonder why it is not documented. – Vogel

you can find more info on their wiki page github.com/angular-ui/ng-grid/wiki – Dwelling

Thanks for the link. I was using the documentation from angular-ui.github.io/ng-grid/#api – Vogel

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

Transmontane

Yes, that's the way I have finally implemented it with the help of Alexin Coroshin's post. – Vogel