Angular ui-grid scrollTo on page load

Question

Hello stackoverflow community,

I'm using AngularJS ui-grid. I want to automatically scroll to a specific row when page is loading (when user returns to the page) but it does not work.

$scope.notifType = [1,2,3,4,5,6,7];
	  
	$scope.gridOptions = {
			rowHeight: 50,
			infiniteScrollPercentage : 15,
			enableSorting: false,

			columnDefs: [
				{ 
					field: 'type', width: 50, displayName: '', 
					cellTemplate: '<div align="center" style="padding-top:10px">'
						 +'<button class="btn btn-xs "'
						 +' ng-click="getExternalScopes().displayChoosenNotifType(row.entity.type)" '	
						 +'tooltip-placement="right" tooltip-html-unsafe="{{\'notification.tooltipFilter\' |translate}}<i>{{\'notification.type.type\'+row.entity.type | translate}}</i>"'
						 +' ng-class="{'
						 +'\'btn-primary\': row.entity.type==1,'
				    	 +'\'btn-warning\': row.entity.type==2 ,'
				    	 +'\'btn-danger\': row.entity.type==3||row.entity.type==4||row.entity.type==5,'
				    	 +'\'btn-success\': row.entity.type==6,'
				    	 +'\'btn-purple\': row.entity.type==7,'
						 +'}">' 
						 +'<span class="icon " '
						 +' ng-class="{'
						 +'\'icon-alarm\': row.entity.type==1,'
				    	 +'\'icon-bell\': row.entity.type==2 ,'
				    	 +'\'icon-warning\': row.entity.type==3||row.entity.type==4 ,'
				    	 +'\'icon-pencil\': row.entity.type==5 ,'
				    	 +'}">'						 
				    	 + '<span class="icon classicNotifIcon" ng-if="row.entity.type===6">C</span>'
				    	 + '<span class="icon classicNotifIcon" ng-if="row.entity.type===7">M</span>'
						 +'</span></button></div>',
						 enableColumnMenu:true,enableHiding:false,
							menuItems:[
							           {
							        	   title: $translate.instant('notification.type.all'),
							        	   action: function(){
							        		   var notifType = [1,2,3,4,5,6,7];
							        		   $scope.displayChoosenNotifType(notifType);
							        	   }
							           },
								     {
								    	 title: $translate.instant('notification.type.type1'),
								    	 action: function(){
								    		 var notifType = [1];
								    		 $scope.displayChoosenNotifType(notifType);
								    	 }
								     },
								     {
								    	 title: $translate.instant('notification.type.type2'),
								    	 action: function(){
								    		 var notifType = [2];
								    		 $scope.displayChoosenNotifType(notifType);
								    	 }
								     },
								     {
								    	 title: $translate.instant('notification.type.type3'),
								    	 action: function(){
								    		 var notifType = [3,4];
								    		 $scope.displayChoosenNotifType(notifType);
								    	 }
								     },
								     {
								    	 title: $translate.instant('notification.type.type5'),
								    	 action: function(){
								    		 var notifType = [5];
								    		 $scope.displayChoosenNotifType(notifType);
								    	 }
								     },
								     {
								    	 title: $translate.instant('notification.type.type6'),
								    	 action: function(){
								    		 var notifType = [6];
								    		 $scope.displayChoosenNotifType(notifType);
								    	 }
								     },
								     {
								    	 title: $translate.instant('notification.type.type7'),
								    	 action: function(){
								    		 var notifType = [7];
								    		 $scope.displayChoosenNotifType(notifType);
								    	 }
								     }
								]
						},
			{ field:'notification',
					cellTemplate: '<div style="padding-left:5px">'
						+'<a ng-click="getExternalScopes().modify(row.entity)" '
						+'ng-class="{'
						+'\'button\': row.entity.type==1 || row.entity.type==2 || row.entity.type==3 || row.entity.type==4 || row.entity.type==6 || row.entity.type==7,'
						+'\'classicNotif\': row.entity.type==5'
						+'}" '
						+'ng-attr-tooltip="{{row.entity.type==1 || row.entity.type==2 || row.entity.type==3 || row.entity.type==4? (\'notification.tooltipChange\' | translate)  : \'\'}}"'
						+'tooltip-placement="right" '
						+'translate="{{\'notification.message.type\'+row.entity.type}}" translate-values="{{row.entity}}">'
						+'</a>'
						+ '</div>',
					enableColumnMenu: false,
			}
		 ]
	 };
var gridApiDefer = $q.defer();
  $scope.gridOptions.onRegisterApi = function(gridApi){
	  $scope.gridApi = gridApi;
	  //call when scrolling have reach the limit percentage.
	  // retrieves next notifications based on current page number 
	  gridApi.infiniteScroll.on.needLoadMoreData($scope,function(){
      $http.get('resources/notifications?page='+$scope.page+'&size=15&type='+$scope.notifType)
        .success(function(notifList) {
        	if(notifList.length > 0){
        		// add notifications to the grid
        		$scope.gridOptions.data = getData(notifList, $scope.page);
        		++$scope.page;
        	}
          gridApi.infiniteScroll.dataLoaded();
        })
        .error(function() {
          gridApi.infiniteScroll.dataLoaded();
        });
	  });
	  
	  gridApiDefer.resolve();
  };
  
  if($location.path().indexOf("/home/return") > -1){
	  var notifs = notifCriteriaService.getCriteria();
	  $scope.notifType = notifs.notifTypesList;
	  $scope.page = notifs.page;
	  $scope.gridOptions.data = notifs.notifsDataList;
	  gridApiDefer.promise.then(function(){
		  $scope.gridApi.cellNav.scrollTo($scope.gridApi.grid, $scope, $scope.gridOptions.data[20], $scope.gridOptions.columnDefs[0]); 
	  });
  }else{
	  $scope.getNotifs();
  }

<div class="row">

	<div class="col-md-6">
         <button type="button" class="btn btn-success" ng-click="scrollTo(20,0)">Scroll To Row 20</button>
         <button type="button" class="btn btn-success" ng-click="scrollToFocus(50,0)">Focus Row 50</button>
		<div>
			<div style="margin-top: 25px; background-color:#fff;">
				<div id="grid1" ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-cellNav></div>
			</div>
		</div>	
	</div>

</div>

When I use the "scroll to" button, it works (not the scrollToFocus button but it is not the major problem). By debugging my code, I see that when I call scrollTo method automatically (ie: not with the button), the grid rows array is empty whereas it is filled when I use the button. I think that my grid is not yet fully initialized in the first scenario.

I think it could work because the ui-grid tutorial says:

Provides an example of requesting a scroll to a specific row or column programatically - useful for remembering the state of a page and scrolling back to that position when a user returns.(http://ui-grid.info/docs/#/tutorial/202_cellnav)

Do you see what I'm doing wrong ?

Thanks in advance.

PS: this is my first post on this amazing site and English is not my native language, feel free to correct me if I use incorrectly stackoverflow tools ;)

Answer 1

I assume you solved/worked around this sometime 9 months ago, but anyhow...

You are calling $scope.gridApi.cellNav.scrollTo(....);

In the example at the uiGrid tutorial they are using $scope.gridApi.core.scrollTo(...)

It seems to me that this is a copy&paste error because you are using $scope.gridApi.cellNav.scrollToFocus(....); somewhere else in your code.

Good luck