How to stop infinite scrolling of ui-grid while content loading finish?

Question

I am using ui-grid. I have already implemented some logic to stop the $http call as follows. But when it reaches last result the scroll is jumping to the row which are few before of last results. So User can not see the last results any time. If User scroll again then after a while It jumps again to the row which are few before of last results.

I used following logic.

$scope.loadMoreData = function() {
         var promise = $q.defer();
         if($scope.lastPage < $scope.maxPage){
         $timeout(function () {
           var arrayObj = [];
           for(var i=0; i<$scope.itemsPerPage; i++){
             arrayObj.push({id:Math.random()*100, name:'Name '+Math.random()});
           }
           $scope.lastPage++;
           $scope.data = $scope.data.concat(arrayObj);
           $scope.gridApi.infiniteScroll.dataLoaded();
               console.log($scope.data);
               promise.resolve();
         }, Math.random()*1000);
         }
         else {
           $scope.gridApi.infiniteScroll.dataLoaded();
           promise.resolve();
         }
         return promise.promise;
      }

Here is the plunker, I used $timeout to replace the $http calls for easy replication.

Here was my another question which I was facing while implementing infinite-scroll.

Note: I have already googled a lot.

Answer 1

When I started working with ui-grid several month ago the infinite scroll was pretty newly implemented and I encountered the same problem you did. But the guys are working very hard to improve things and when using the newest version of ui-grid, the infinite scroll works like a charm!

I updated your Plunkr with the newest ui-grid version and everything works just fine.

<script src="http://ui-grid.info/release/ui-grid.js"></script>