Merge pull request angular-ui#2959 from PaulL1/fixes

Fixes to edit, cellNav, FAQ

Author: PaulL1

misc/tutorial/499_FAQ.ngdoc

@@ -4,17 +4,42 @@
 
 There are a number of common gotchas in using the grid, this FAQ aims to cover most of them in an easy to use format.
 
-### My fonts are all "chinese"
+### My fonts are all "chinese"?
 
   Refer to {@link 116_fonts_and_installation 116 Fonts and Installation}.  The characters are apparently Korean, 
   and in short, it means your fonts aren't installed properly.
 
-### One of my columns hasn't turned up
+### One of my columns hasn't turned up?
 
   Your column names must be unique - have you given two columns the same name?  If you want the same `displayName` you can
   do this, and you can have two columns refer to the same `field`, but each column must have a unique name.
 
-### How do I get my grid to be responsive / take the full page height / automatically set height / when I use ng-show things go bad
+### How do I get my grid to be responsive / take the full page height / automatically set height / when I use ng-show things go bad?
 
   Refer to {@link 108_hidden_grids 108 Hidden Grids}.  The short answer is the grid doesn't know how high it's content is until
-  it renders, and it doesn't dynamically resize.  You need to give an explicit height or an explicit number of rows to render.
+  it renders, and it doesn't dynamically resize.  You need to give an explicit height or an explicit number of rows to render.
+  
+### How can I show a sequence number/id in a column in my grid?
+
+  The question here is what you're really trying to achieve.  Do you want the actual row index, or that you want to display a sequential 
+  id in all your rows?
+
+  If the latter, then you can do it by just adding a counter column to your data:
+
+```
+  angular.forEach($scope.myData, function( row, index){
+    row.sequence = index;
+  });
+```  
+
+  If you want to show the index of the row within the grid internals, then it depends on which internal you want. You can get 
+  the index of the row within grid.rows, which would show the row as it stands in the original rows list (not filtered nor sorted), 
+  or the index of the row within grid.renderContainers.body.visibleRowCache (filtered and sorted), or the render index of the 
+  row within the currently displayed rows (given virtualisation, this is generally a particularly useless number).
+
+  If you're OK that whenever someone sorts or filters then the numbers will change, then you could do it with a cellTemplate, 
+  which would be something like:
+  
+```
+  cellTemplate: '<div>{{row.grid.renderContainers.body.visibleRowsCache.indexOf(row)}}</div>
+```

src/features/cellnav/js/cellnav.js

@@ -311,7 +311,7 @@
 
                 /**
                  * @ngdoc function
-                 * @name scrollToFocus
+                 * @name scrollToIfNecessary
                  * @methodOf  ui.grid.cellNav.api:PublicApi
                  * @description brings the specified row and column fully into view if it isn't already
                  * @param {GridRow} row grid row that we should make fully visible
@@ -503,7 +503,7 @@
           if (colDef !== null && typeof(colDef) !== 'undefined' ) {
             gridCol = grid.getColumn(colDef.name ? colDef.name : colDef.field);
           }
-          this.scrollToInternal(grid, gridRow, gridCol);
+          this.scrollToIfNecessary(grid, gridRow, gridCol);
         },
 
         /**
@@ -520,14 +520,14 @@
         scrollToFocus: function (grid, rowEntity, colDef) {
           var gridRow = null, gridCol = null;
 
-          if (rowEntity !== null) {
+          if (typeof(rowEntity) !== 'undefined' && rowEntity !== null) {
             gridRow = grid.getRow(rowEntity);
           }
 
-          if (colDef !== null) {
+          if (typeof(colDef) !== 'undefined' && colDef !== null) {
             gridCol = grid.getColumn(colDef.name ? colDef.name : colDef.field);
           }
-          this.scrollToInternal(grid, gridRow, gridCol);
+          this.scrollToIfNecessary(grid, gridRow, gridCol);
 
           var rowCol = { row: gridRow, col: gridCol };
 

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

@@ -206,18 +206,22 @@ describe('ui.grid.edit uiGridCellNavService', function () {
 
     });
 
+
+    // these have changed to use scrollToIfNecessary, which is better code
+    // but it means these unit tests are now mostly checking that it is the same it used to
+    // be, not that it is giving some specified result (i.e. I just updated them to what they were)
     it('should request scroll to row and column', function () {
       uiGridCellNavService.scrollTo( grid, grid.options.data[4], grid.columns[4].colDef);
 
       expect(args.grid).toEqual(grid);
-      expect(args.y).toEqual( { percentage : (3 + 3/9 ) / 10 });
-      expect(args.x).toEqual({ percentage :  (300 + 100 * 4/10)/1500 });
+      expect(args.y).toEqual( { percentage : 5/11 });
+      expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request scroll to row only - first row', function () {
       uiGridCellNavService.scrollTo( grid, grid.options.data[0], null);
 
-      expect(args.y).toEqual( { percentage : 0 });
+      expect(args.y).toEqual( { percentage : 2/11 });
     });
 
     it('should request scroll to row only - last row', function () {
@@ -229,25 +233,25 @@ describe('ui.grid.edit uiGridCellNavService', function () {
     it('should request scroll to row only - row 4', function () {
       uiGridCellNavService.scrollTo( grid, grid.options.data[5], null);
 
-      expect(args.y).toEqual( { percentage : ( 4 + 4/9 ) / 10 });
+      expect(args.y).toEqual( { percentage : 6/11 });
     });
 
     it('should request scroll to column only - first column', function () {
       uiGridCellNavService.scrollTo( grid, null, grid.columns[0].colDef);
 
-      expect(args.x).toEqual( { percentage :  0 });
+      expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request scroll to column only - last column', function () {
       uiGridCellNavService.scrollTo( grid, null, grid.columns[10].colDef);
 
-      expect(args.x).toEqual( { percentage :  1 });
+      expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request scroll to column only - column 7', function () {
       uiGridCellNavService.scrollTo( grid,  null, grid.columns[8].colDef);
 
-      expect(args.x).toEqual( { percentage :  (900 + 200 * 8/10) / 1500 } );
+      expect(isNaN(args.x.percentage)).toEqual( true );
     });
 
     it('should request no scroll as no row or column', function () {

src/features/edit/js/gridEdit.js

@@ -385,8 +385,8 @@
    */
 
   module.directive('uiGridCell',
-    ['$compile', '$injector', '$timeout', 'uiGridConstants', 'uiGridEditConstants', 'gridUtil', '$parse', 'uiGridEditService',
-      function ($compile, $injector, $timeout, uiGridConstants, uiGridEditConstants, gridUtil, $parse, uiGridEditService) {
+    ['$compile', '$injector', '$timeout', 'uiGridConstants', 'uiGridEditConstants', 'gridUtil', '$parse', 'uiGridEditService', '$rootScope',
+      function ($compile, $injector, $timeout, uiGridConstants, uiGridEditConstants, gridUtil, $parse, uiGridEditService, $rootScope) {
         var touchstartTimeout = 500;
 
         return {
@@ -636,7 +636,7 @@
               $scope.editDropdownValueLabel = $scope.col.colDef.editDropdownValueLabel ? $scope.col.colDef.editDropdownValueLabel : 'value';
 
               var cellElement;
-              $scope.$apply(function () {
+              var createEditor = function(){
                 inEdit = true;
                 cancelBeginEditEvents();
                 var cellElement = angular.element(html);
@@ -646,7 +646,12 @@
                 var gridCellContentsEl = angular.element($elm.children()[0]);
                 isFocusedBeforeEdit = gridCellContentsEl.hasClass('ui-grid-cell-focus');
                 gridCellContentsEl.addClass('ui-grid-cell-contents-hidden');
-              });
+              };
+              if (!$rootScope.$$phase) {
+                $scope.$apply(createEditor);
+              } else {
+                createEditor();
+              }
 
               //stop editing when grid is scrolled
               var deregOnGridScroll = $scope.col.grid.api.core.on.scrollEvent($scope, function () {