Merge pull request #2376 from PaulL1/2221_scrollToFocus

Fix #2221 (cellNav): Add scrollToFocus method

Author: PaulL1

misc/tutorial/202_cellnav.ngdoc

@@ -7,9 +7,11 @@ module and you must include the ui-grid-cellNav directive on your grid element.
 
 Uses the gridOptions.onRegisterApi callback to register the on_cellNav event and log when the cell is navigated.
 
-Also provides an example of requesting a scroll to a specific row or column programatically - useful for
+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.
 
+Provides an example of scrolling to and setting the focus on a specific cell, using the scrollToFocus api.
+
 @example
 <example module="app">
   <file name="app.js">
@@ -50,6 +52,10 @@ remembering the state of a page and scrolling back to that position when a user
           $scope.gridApi.cellNav.scrollTo( $scope.gridApi.grid, $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.gridOptions.onRegisterApi = function(gridApi){
            $scope.gridApi = gridApi;
            gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
@@ -69,6 +75,7 @@ remembering the state of a page and scrolling back to that position when a user
       <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="scrollTo(0,7)">Scroll To Balance</button>
       <button type="button" class="btn btn-success" ng-click="scrollTo(50,7)">Scroll To Row 50, Balance</button>
+      <button type="button" class="btn btn-success" ng-click="scrollToFocus(50,7)">Focus Row 50, Balance</button>
       <button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button>  <span ng-bind="currentFocused"></span>
       <br>
       <br>

src/features/cellnav/js/cellnav.js

@@ -218,6 +218,22 @@
                   service.scrollTo(grid, $scope, rowEntity, colDef);
                 },
 
+                /**
+                 * @ngdoc function
+                 * @name scrollToFocus
+                 * @methodOf  ui.grid.cellNav.api:PublicApi
+                 * @description brings the specified row and column into view, and sets focus
+                 * to that cell
+                 * @param {Grid} grid the grid you'd like to act upon, usually available
+                 * from gridApi.grid
+                 * @param {object} $scope a scope we can broadcast events from
+                 * @param {object} rowEntity gridOptions.data[] array instance to make visible and set focus
+                 * @param {object} colDef to make visible and set focus
+                 */
+                scrollToFocus: function (grid, $scope, rowEntity, colDef) {
+                  service.scrollToFocus(grid, $scope, rowEntity, colDef);
+                },
+
                 /**
                  * @ngdoc function
                  * @name getFocusedCell
@@ -344,6 +360,37 @@
           this.scrollToInternal(grid, $scope, gridRow, gridCol);
         },
 
+        /**
+         * @ngdoc method
+         * @methodOf ui.grid.cellNav.service:uiGridCellNavService
+         * @name scrollToFocus
+         * @description Scroll the grid such that the specified
+         * row and column is in view, and set focus to the cell in that row and column
+         * @param {Grid} grid the grid you'd like to act upon, usually available
+         * from gridApi.grid
+         * @param {object} $scope a scope we can broadcast events from
+         * @param {object} rowEntity gridOptions.data[] array instance to make visible and set focus to
+         * @param {object} colDef to make visible and set focus to
+         */
+        scrollToFocus: function (grid, $scope, rowEntity, colDef) {
+          var gridRow = null, gridCol = null;
+
+          if (rowEntity !== null) {
+            gridRow = grid.getRow(rowEntity);
+          }
+
+          if (colDef !== null) {
+            gridCol = grid.getColumn(colDef.name ? colDef.name : colDef.field);
+          }
+          this.scrollToInternal(grid, $scope, gridRow, gridCol);
+          
+          var rowCol = { row: gridRow, col: gridCol };
+
+          // Broadcast the navigation
+          grid.cellNav.broadcastCellNav(rowCol);
+          
+        },
+        
         /**
          * @ngdoc method
          * @methodOf ui.grid.cellNav.service:uiGridCellNavService
@@ -626,6 +673,7 @@
         compile: function () {
           return {
             pre: function ($scope, $elm, $attrs, uiGridCtrl) {
+              var _scope = $scope;
 
               var grid = uiGridCtrl.grid;
               uiGridCellNavService.initializeGrid(grid);
@@ -637,8 +685,8 @@
               };
 
               //  gridUtil.logDebug('uiGridEdit preLink');
-              uiGridCtrl.cellNav.broadcastCellNav = function (newRowCol) {
-                $scope.$broadcast(uiGridCellNavConstants.CELL_NAV_EVENT, newRowCol);
+              uiGridCtrl.cellNav.broadcastCellNav = grid.cellNav.broadcastCellNav = function (newRowCol) {
+                _scope.$broadcast(uiGridCellNavConstants.CELL_NAV_EVENT, newRowCol);
                 uiGridCtrl.cellNav.broadcastFocus(newRowCol);
               };