Angular ui.grid infinite scroll is not being called second time onwords

Question

My infinite scroll is not working 2nd time onward. I mean it loads the data first time while scrolling, after loading it also append the data to my data set but again if I scroll then it does not calling my load method.

Attached Plunker here. Removed $http code with $timeout to reproduce problem on plunker. $timeout also same problem persist.

var app = angular.module('plunker', ['ui.grid', 'ui.grid.infiniteScroll']);

    angular.module('plunker').controller('ListController',ListController);
    ListController.$inject = ['$scope', '$timeout', '$q'];                              
    function ListController  ( $scope,   $timeout,   $q) {
    	$scope.itemsPerPage = 20;
    	$scope.lastPage = 0;
    	$scope.data = [];
    	
    	var request = {"startAt" : "1","noOfRecords" : $scope.itemsPerPage};
    	
    	$scope.gridOptions = {
		    infiniteScrollDown: true,
		    columnDefs: [
		      { field: 'id', name:'ID'},
		      { field: 'name', name:'My Name'}
		    ],
		    data: 'data',
		    onRegisterApi: function(gridApi){
		      gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.loadMoreData);
		      $scope.gridApi = gridApi;
		    }
		 };
    	
		 
	   $scope.loadMoreData = function() {
	     var promise = $q.defer();
	     $timeout(function () {
           //Sample Data Creation Start
	       var arrayObj = [];
	       for(var i=0; i<$scope.itemsPerPage; i++){
	         arrayObj.push({id:Math.random()*100, name:'Name '+Math.random()});
	       }
           //Sample Data Creation End
	       $scope.data = $scope.data.concat(arrayObj);
			   console.log($scope.data);
			   promise.resolve();
	     }, Math.random()*1000);
	     return promise.promise;
	  };
		
	  	$scope.loadMoreData();
    }

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ListController">
    <div data-ui-grid="gridOptions" class="grid" data-ui-grid-infinite-scroll></div>
  </body>

</html>

Seems I am missing some event attachment after 1st scroll down load. Please help.

CMR · Accepted Answer · 2015-11-10 14:04:35Z

2

You are indeed missing the notification, that your new data was loaded.

$scope.gridApi.infiniteScroll.dataLoaded()

Here is an updated version of your Plunkr. See line 36 in app.js.

answered Nov 10, 2015 at 14:04

CMR

9331 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Partha Sarathi Ghosh Over a year ago

Thanks, your suggestion is working good. But I am facing a new problem while all of my content finished loading scroll bar is not staying on last result. It jumps to last few result. Here is another question I posted related to that. stackoverflow.com/questions/33665641/…

Collectives™ on Stack Overflow

Angular ui.grid infinite scroll is not being called second time onwords

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related