misc/tutorial/202_cellnav.ngdoc

@@ -54,11 +54,11 @@ Provides an example of scrolling to and setting the focus on a specific cell, us
         };
 
         $scope.scrollTo = function( rowIndex, colIndex ) {
-          $scope.gridApi.cellNav.scrollTo( $scope.gridApi.grid, $scope, $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]); 
+          $scope.gridApi.cellNav.scrollTo( $scope, $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]); 
         };
 
         $scope.scrollToFocus = function( rowIndex, colIndex ) {
-          $scope.gridApi.cellNav.scrollToFocus( $scope.gridApi.grid, $scope, $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]); 
+          $scope.gridApi.cellNav.scrollToFocus( $scope, $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]); 
         };
 
         $scope.gridOptions.onRegisterApi = function(gridApi){

misc/tutorial/211_two_grids.ngdoc

@@ -8,10 +8,18 @@ each other.
 @example
 <example module="app">
   <file name="app.js">
-    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']);
+    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.cellNav']);
 
     app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
-      $scope.gridOptions = {};
+      $scope.gridOptions = {
+        onRegisterApi: function(gridApi){
+          $scope.gridApi = gridApi;
+        }
+      };
+
+      $scope.scrollTo = function( rowIndex, colIndex ) {
+        $scope.gridApi.cellNav.scrollTo( $scope, $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]); 
+      };
 
       $http.get('/data/100.json')
         .success(function(data) {
@@ -32,10 +40,11 @@ each other.
   </file>
   <file name="index.html">
     <div ng-controller="MainCtrl">
-      <div id="firstGrid" ui-grid="gridOptions" ui-grid-selection class="grid"></div>
+      <button type="button" class="btn btn-success" ng-click="scrollTo(20,0)">Scroll To Row 20</button>
+      <div id="firstGrid" ui-grid="gridOptions" ui-grid-selection ui-grid-cellNav class="grid"></div>
     </div>
     <div ng-controller="SecondCtrl">
-      <div id="secondGrid" ui-grid="gridOptions" ui-grid-selection class="grid"></div>
+      <div id="secondGrid" ui-grid="gridOptions" ui-grid-selection ui-grid-cellNav class="grid"></div>
     </div>
   </file>
   <file name="main.css">

src/features/cellnav/js/cellnav.js

@@ -472,6 +472,8 @@
          */
         scrollToInternal: function (grid, $scope, gridRow, gridCol) {
           var args = {};
+
+          args.grid = grid;
 
           if (gridRow !== null) {
             var seekRowIndex = grid.renderContainers.body.visibleRowCache.indexOf(gridRow);
@@ -503,6 +505,8 @@
          */
         scrollToIfNecessary: function (grid, $scope, gridRow, gridCol) {
           var args = {};
+
+          args.grid = grid;
 
           // Alias the visible row and column caches 
           var visRowCache = grid.renderContainers.body.visibleRowCache;
@@ -823,6 +827,11 @@
 
               // When there's a scroll event we need to make sure to re-focus the right row, because the cell contents may have changed
               $scope.$on(uiGridConstants.events.GRID_SCROLL, function (evt, args) {
+                // Skip if not this grid that the event was broadcast for
+                if (args.grid && args.grid.id !== uiGridCtrl.grid.id) {
+                  return;
+                }
+
                 // Skip if there's no currently-focused cell
                 if (uiGridCtrl.grid.api.cellNav.getFocusedCell() == null) {
                   return;

src/features/cellnav/test/uiGridCellNavService.spec.js

@@ -211,49 +211,49 @@ describe('ui.grid.edit uiGridCellNavService', function () {
     it('should request scroll to row and column', function () {
       uiGridCellNavService.scrollTo( grid, $scope, grid.options.data[4], grid.columns[4].colDef);
 
-      expect(args).toEqual( { y : { percentage : (3 + 3/9 ) / 10 }, x : { percentage :  (300 + 100 * 4/10)/1500 } });
+      expect(args).toEqual( { grid: grid, y : { percentage : (3 + 3/9 ) / 10 }, x : { percentage :  (300 + 100 * 4/10)/1500 } });
     });
 
     it('should request scroll to row only - first row', function () {
       uiGridCellNavService.scrollTo( grid, $scope, grid.options.data[0], null);
 
-      expect(args).toEqual( { y : { percentage : 0 } });
+      expect(args).toEqual( { grid: grid, y : { percentage : 0 } });
     });
 
     it('should request scroll to row only - last row', function () {
       uiGridCellNavService.scrollTo( grid, $scope, grid.options.data[10], null);
 
-      expect(args).toEqual( { y : { percentage : 1 } });
+      expect(args).toEqual( { grid: grid, y : { percentage : 1 } });
     });
 
     it('should request scroll to row only - row 4', function () {
       uiGridCellNavService.scrollTo( grid, $scope, grid.options.data[5], null);
 
-      expect(args).toEqual( { y : { percentage : ( 4 + 4/9 ) / 10 } });
+      expect(args).toEqual( { grid: grid, y : { percentage : ( 4 + 4/9 ) / 10 } });
     });
 
     it('should request scroll to column only - first column', function () {
       uiGridCellNavService.scrollTo( grid, $scope, null, grid.columns[0].colDef);
 
-      expect(args).toEqual( { x : { percentage :  0 } });
+      expect(args).toEqual( { grid: grid, x : { percentage :  0 } });
     });
 
     it('should request scroll to column only - last column', function () {
       uiGridCellNavService.scrollTo( grid, $scope, null, grid.columns[10].colDef);
 
-      expect(args).toEqual( { x : { percentage :  1 } });
+      expect(args).toEqual( { grid: grid, x : { percentage :  1 } });
     });
 
     it('should request scroll to column only - column 7', function () {
       uiGridCellNavService.scrollTo( grid, $scope, null, grid.columns[8].colDef);
 
-      expect(args).toEqual( { x : { percentage :  (900 + 200 * 8/10) / 1500 } });
+      expect(args).toEqual( { grid: grid, x : { percentage :  (900 + 200 * 8/10) / 1500 } });
     });
 
     it('should request no scroll as no row or column', function () {
       uiGridCellNavService.scrollTo( grid, $scope, null, null );
 
-      expect(args).toEqual(null);
+      expect(args).toEqual( null );
     });
   });
 });

src/js/core/directives/ui-grid-native-scrollbar.js

@@ -254,6 +254,11 @@
           if (args.target && (args.target === $elm || angular.element(args.target).hasClass('ui-grid-native-scrollbar'))) {
             return;
           }
+
+          // Don't listen to scrolls from other grids
+          if (args.grid && args.grid.id !== grid.id){
+            return;
+          }
 
           // Set the source of the scroll event in our scope so it's available in our 'scroll' event handler
           $scope.scrollSource = args.target;

src/js/core/directives/ui-grid-render-container.js

@@ -74,6 +74,11 @@
             }
 
             function scrollHandler (evt, args) {
+              // exit if not for this grid
+              if (args.grid && args.grid.id !== grid.id){
+                return;
+              }
+
               // Vertical scroll
               if (args.y && $scope.bindScrollVertical) {
                 containerCtrl.prevScrollArgs = args;

src/js/core/directives/ui-grid.js

@@ -117,6 +117,7 @@
       /* Event Methods */
 
       self.fireScrollingEvent = gridUtil.throttle(function(args) {
+        args.grid = args.grid || self.grid;
         $scope.$broadcast(uiGridConstants.events.GRID_SCROLL, args);
       }, self.grid.options.scrollThrottle, {trailing: true});