Merge pull request #2374 from PaulL1/2161_cell_class

Fix #2161 #2120 (cellClass): watch that notices changed cell, update cel...

Author: PaulL1

misc/tutorial/111_cellClass.ngdoc

@@ -62,6 +62,12 @@ In this example, we will override the color and background for the first column
         // color blue for 2,1, which has company name 'Velity'
         gridTestUtils.expectCellValueMatch( 'grid1', 2, 1, 'Velity' );
         expect( gridTestUtils.dataCell( 'grid1', 2, 1 ).getCssValue('color')).toEqual('rgba(0, 0, 255, 1)');
+        
+        // sort by company, 2,1 is no longer Velity so shouldn't be blue, check it's the same colour as row 1
+        gridTestUtils.clickHeaderCell( 'grid1', 1 );
+        gridTestUtils.expectCellValueMatch( 'grid1', 2, 1, 'Acusage' );
+        expect( gridTestUtils.dataCell( 'grid1', 1, 1 ).getCssValue('color')).toEqual('rgba(44, 62, 80, 1)');
+        expect( gridTestUtils.dataCell( 'grid1', 2, 1 ).getCssValue('color')).toEqual('rgba(44, 62, 80, 1)');
       });
     });    
   </file>

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

@@ -67,10 +67,27 @@ angular.module('ui.grid').directive('uiGridCell', ['$compile', '$parse', 'gridUt
           // Register a data change watch that would get triggered whenever someone edits a cell or modifies column defs
           var watchUid = $scope.grid.registerDataChangeCallback( updateClass, [uiGridConstants.dataChange.COLUMN, uiGridConstants.dataChange.EDIT]);
 
+          // watch the col and row to see if they change - which would indicate that we've scrolled or sorted or otherwise
+          // changed the row/col that this cell relates to, and we need to re-evaluate cell classes and maybe other things
+          var cellChangeFunction = function( n, o ){
+            if ( n !== o ) {
+              if ( classAdded || $scope.col.cellClass ){
+                updateClass();
+              }
+            }
+          };
+
+          var colWatchDereg = $scope.$watch( 'col', cellChangeFunction );
+          var rowWatchDereg = $scope.$watch( 'row', cellChangeFunction );
+          
+          
           var deregisterFunction = function() {
-           $scope.grid.deregisterDataChangeCallback( watchUid ); 
+            $scope.grid.deregisterDataChangeCallback( watchUid );
+            colWatchDereg();
+            rowWatchDereg(); 
           };
 
+          
           $scope.$on( '$destroy', deregisterFunction );
         }
       };

test/unit/core/directives/uiGridCell.spec.js

@@ -65,6 +65,26 @@ describe('uiGridCell', function () {
       $scope.grid.api.core.notifyDataChange( $scope.grid, uiGridConstants.dataChange.COLUMN );
       expect(gridCell.hasClass('funcCellClass')).toBe(false);
     }));
+
+    it('should notice col changes and update cellClass', inject(function () {
+      $scope.col.cellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
+        if (rowRenderIndex === 2 && colRenderIndex === 2) {
+          if ( col.noClass ){
+            return '';
+          } else {
+            return 'funcCellClass';
+          }
+        }
+      };
+      recompile();
+      var displayHtml = gridCell.html();
+      expect(gridCell.hasClass('funcCellClass')).toBe(true);
+      
+      $scope.col = new GridColumn({name: 'col2'}, 0, $scope.grid);
+      $scope.$digest();
+      expect(gridCell.hasClass('funcCellClass')).toBe(false);
+    }));
   });
 
+
 });