How to use page scrolling in ngGridEventScroll?

Question

Using ngGrid v2.X, I am trying to devolop a grid that loads more data when page scrolling (not grid scrolling) is reduced.

When searching for similar questions, I found a solution to my first problem : ngGrid should have dynamic height , so I did it

.ngViewport{ height:auto !important; } .ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel { width: 100% !important; } .ngRow { border-bottom:none !important; } 

Which brings me to my second problem. I need the data to be loaded by scrolling, and I found: ngGridEventScroll , but o nly triggers, when ngGrid intern scroll, I need a page scroll

  $scope.$on('ngGridEventScroll', function () { $scope.currentDataPosition++; $scope.setPagingData($scope.dataArray, $scope.currentDataPosition, $scope.pagingOptions.pageSize); }); 

So solution 1 violates solution 2 because ngGridEventScroll no longer has intern scrolling.

  $scope.setPagingData = function (data, page, pageSize) { cfpLoadingBar.start(); var pagedData = data.slice((page - 1) * pageSize, page * pageSize, page * pageSize); $scope.totalServerItems = data.length; $scope.myData = pagedData; cfpLoadingBar.complete(); }; $scope.gridOptions = { data: 'myData', virtualizationThreshold: 50, enableRowSelection: false, enablePaging: false, enableSorting: false, showFooter: false, pagingOptions: $scope.pagingOptions, filterOptions: $scope.filterOptions, } 

What can be done?

Answer 1

You can use ngInfiniteScroll ( https://sroze.imtqy.com/ngInfiniteScroll/index.html ) and apply the following strategy.

In your controller

  $scope.limit = 50; // Initial limit (make sure its enough to cover the whole page, otherwise the raiseLimit function might not be called) $scope.raiseLimit = function() { // function called by ngInfiniteScroll if ( $scope.limit < data.length) { $scope.limit += 10; // adjust to your need } else { $scope.dataLoaded = true; } } $scope.dataLoaded = false; // prevent useless call $scope.myData = $filter('limitTo')(data, $scope.limit); // Do not forget to inject $filter into your controller 

In your html

  <div infinite-scroll='raiseLimit()' infinite-scroll-disabled='dataLoaded'> <!-- put your grid with dynamic height here --> </div>