angular-ui · PaulL1 · Oct 16, 2014 · Oct 16, 2014
diff --git a/misc/tutorial/115_headerCellClass.ngdoc b/misc/tutorial/115_headerCellClass.ngdoc
@@ -0,0 +1,77 @@
+@ngdoc overview
+@name Tutorial: 115 HeaderCellClass
+@description
+
+A class name or function returning a class name can be assigned to each columnDef.
+
+In this example, we will set the font color of header column 0 to blue, and conditionally
+set the background and foreground color of the header if the sort direction is ASC
+
+<example module="app">
+  <file name="app.js">
+    var app = angular.module('app', ['ngAnimate', 'ui.grid']);
+
+    app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
+      $scope.gridOptions = {
+        enableSorting: true,
+        columnDefs: [
+          { field: 'name', headerCellClass: 'blue' },
+          { field: 'company',
+            headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
+              if (col.sort.direction === uiGridConstants.ASC) {
+                return 'red';
+              }
+            }
+          }
+        ],
+        onRegisterApi: function( gridApi ) {
+          $scope.gridApi = gridApi;
+          $scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
+            $scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.COLUMN );
+          })
+        }
+      };
+
+      $http.get('/data/100.json')
+        .success(function(data) {
+          $scope.gridOptions.data = data;
+        });
+    }]);
+  </file>
+  <file name="index.html">
+    <div ng-controller="MainCtrl">
+      <br>
+      <br>
+      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
+    </div>
+  </file>
+  <file name="main.css">
+    .grid {
+      width: 500px;
+      height: 200px;
+    }
+    .red { color: red;  background-color: yellow !important; }
+    .blue { color: blue;  }
+  </file>
+  <file name="scenario.js">
+    var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
+    describe( '115 header cell class', function() {
+      it('grid should have two visible columns', function () {
+        gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
+      });
+
+      it('cell classes', function () {
+        // blue for header 0
+        expect( gridTestUtils.headerCell( 'grid1', 0 ).getCssValue('color')).toEqual('rgba(0, 0, 255, 1)');
+
+        // header 2 starts with no coloring, but colors when sort is ASC
+        expect( gridTestUtils.headerCell( 'grid1', 1 ).getCssValue('color')).toEqual('rgba(44, 62, 80, 1)', 'normal foreground');
+
+        gridTestUtils.clickHeaderCell( 'grid1', 1 );
+        expect( gridTestUtils.headerCell( 'grid1', 1 ).getCssValue('color')).toEqual('rgba(255, 0, 0, 1)', 'red highlight');
+
+      });
+    });    
+  </file>
+</example>
+
diff --git a/src/features/cellnav/js/cellnav.js b/src/features/cellnav/js/cellnav.js
@@ -554,7 +554,7 @@
 
           function setFocused() {
             var div = $elm.find('div');
-            console.log('setFocused: ' + div[0].parentElement.className);
+            // gridUtil.logDebug('setFocused: ' + div[0].parentElement.className);
             div[0].focus();
             div.attr("tabindex", 0);
             $scope.grid.queueRefresh();

diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js
@@ -405,7 +405,7 @@
             }
 
             function beginEditFocus(evt) {
-              console.log('begin edit');
+              // gridUtil.logDebug('begin edit');
               evt.stopPropagation();
               beginEdit();
             }
@@ -569,6 +569,7 @@
               isFocusedBeforeEdit = false;
               inEdit = false;
               registerBeginEditEvents();
+              $scope.grid.api.core.notifyDataChange( $scope.grid, uiGridConstants.dataChange.EDIT );
             }
 
             function cancelEdit() {

diff --git a/src/features/importer/js/importer.js b/src/features/importer/js/importer.js
@@ -52,15 +52,17 @@
    *
    *  @description Services for importer feature
    */
-  module.service('uiGridImporterService', ['$q', 'uiGridImporterConstants', 'gridUtil', '$compile', '$interval', 'i18nService', '$window',
-    function ($q, uiGridImporterConstants, gridUtil, $compile, $interval, i18nService, $window) {
+  module.service('uiGridImporterService', ['$q', 'uiGridConstants', 'uiGridImporterConstants', 'gridUtil', '$compile', '$interval', 'i18nService', '$window',
+    function ($q, uiGridConstants, uiGridImporterConstants, gridUtil, $compile, $interval, i18nService, $window) {
 
       var service = {
 
-        initializeGrid: function (grid) {
+        initializeGrid: function ($scope, grid) {
 
           //add feature namespace and any properties to grid for needed state
-          grid.importer = {};
+          grid.importer = {
+            $scope: $scope 
+          };
 
           this.defaultGridOptions(grid.options);
 
@@ -625,6 +627,14 @@
          * @description Inserts our new objects into the grid data, and
          * sets the rows to dirty if the rowEdit feature is being used
          * 
+         * Does this by registering a watch on dataChanges, which essentially
+         * is waiting on the result of the grid data watch, and downstream processing.
+         * 
+         * When the callback is called, it deregisters itself - we don't want to run
+         * again next time data is added.
+         * 
+         * If we never get called, we deregister on destroy.
+         * 
          * @param {Grid} grid the grid we're importing into
          * @param {array} newObjects the objects we want to insert into the grid data
          * @returns {object} the new object
@@ -634,10 +644,17 @@
             var callbackId = grid.registerDataChangeCallback( function() {
               grid.api.rowEdit.setRowsDirty( grid, newObjects );
               grid.deregisterDataChangeCallback( callbackId );
-            });
+            }, [uiGridConstants.dataChange.ROW] );
+
+            var deregisterClosure = function() {
+              grid.deregisterDataChangeCallback( callbackId );
+            };
+
+            grid.importer.$scope.$on( '$destroy', deregisterClosure );
           }
 
           grid.options.importerDataAddCallback( grid, newObjects );
+
         },
 
 
@@ -703,7 +720,7 @@
         require: '^uiGrid',
         scope: false,
         link: function ($scope, $elm, $attrs, uiGridCtrl) {
-          uiGridImporterService.initializeGrid(uiGridCtrl.grid);
+          uiGridImporterService.initializeGrid($scope, uiGridCtrl.grid);
         }
       };
     }

diff --git a/src/features/importer/test/importer.spec.js b/src/features/importer/test/importer.spec.js
@@ -51,7 +51,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
 
     grid = gridClassFactory.createGrid(gridOptions);
 
-    _uiGridImporterService_.initializeGrid(grid);
+    _uiGridImporterService_.initializeGrid($scope, grid);
     grid.buildColumns();
     grid.modifyRows(grid.options.data);
     grid.rows[1].visible = false;
@@ -215,8 +215,9 @@ describe('ui.grid.importer uiGridImporterService', function () {
         uiGridImporterService.importJsonClosure( grid )( testFile );
 
         grid.modifyRows($scope.data);
+
         angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) {
-          callback( grid );
+          callback.callback( grid );
         });
 
         expect( $scope.data.length ).toEqual(5, 'data should now have 5 rows');
@@ -225,7 +226,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
         expect( grid.rows.length ).toEqual(5, 'grid should now have 5 rows');
         expect( grid.rows[3].isDirty ).toEqual( true );
         expect( grid.rows[4].isDirty ).toEqual( true );
-        expect( grid.rowEditDirtyRows.length).toEqual(2);
+        expect( grid.rowEdit.dirtyRows.length).toEqual(2);
       });  
     });
 
@@ -283,7 +284,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
 
         grid.modifyRows($scope.data);
         angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) {
-          callback( grid );
+          callback.callback( grid );
         });
 
         expect( $scope.data.length ).toEqual(5, 'data should now have 5 rows');
@@ -292,7 +293,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
         expect( grid.rows.length ).toEqual(5, 'grid should now have 5 rows');
         expect( grid.rows[3].isDirty ).toEqual( true );
         expect( grid.rows[4].isDirty ).toEqual( true );
-        expect( grid.rowEditDirtyRows.length).toEqual(2);
+        expect( grid.rowEdit.dirtyRows.length).toEqual(2);
       }); 
     });
 
@@ -481,7 +482,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
 
         grid.modifyRows($scope.data);
         angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) {
-          callback( grid );
+          callback.callback( grid );
         });
 
         expect( $scope.data.length ).toEqual(5, 'data should now have 5 rows');
@@ -490,7 +491,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
         expect( grid.rows.length ).toEqual(5, 'grid should now have 5 rows');
         expect( grid.rows[3].isDirty ).toEqual( true );
         expect( grid.rows[4].isDirty ).toEqual( true );
-        expect( grid.rowEditDirtyRows.length).toEqual(2);
+        expect( grid.rowEdit.dirtyRows.length).toEqual(2);
       });  
     });
 

diff --git a/src/features/pinning/test/pinning.spec.js b/src/features/pinning/test/pinning.spec.js
@@ -82,7 +82,6 @@
 
     describe('enables pinning when gridOptions.enablePinning is true', function () {
       it('should add pinned containers to the DOM', function () {
-        console.log(grid);
         var leftContainer = $(grid).find('[ui-grid-pinned-container*=left]');
         expect(leftContainer.size()).toEqual(1);
 
@@ -199,7 +198,6 @@
           })
           .first();
 
-        console.log(updateContainerDimensionsFunction());
       });
     });
   });

diff --git a/src/features/row-edit/js/gridRowEdit.js b/src/features/row-edit/js/gridRowEdit.js
@@ -46,6 +46,9 @@
            *
            *  @description Public Api for rowEdit feature
            */
+
+          grid.rowEdit = {};
+
           var publicApi = {
             events: {
               rowEdit: {
@@ -113,7 +116,7 @@
                  * 
                  */
                 getDirtyRows: function (grid) {
-                  return grid.rowEditDirtyRows ? grid.rowEditDirtyRows : [];
+                  return grid.rowEdit.dirtyRows ? grid.rowEdit.dirtyRows : [];
                 },
                 /**
                  * @ngdoc method
@@ -128,7 +131,7 @@
                  * 
                  */
                 getErrorRows: function (grid) {
-                  return grid.rowEditErrorRows ? grid.rowEditErrorRows : [];
+                  return grid.rowEdit.errorRows ? grid.rowEdit.errorRows : [];
                 },
                 /**
                  * @ngdoc method
@@ -272,8 +275,8 @@
             delete gridRow.isDirty;
             delete gridRow.isError;
             delete gridRow.rowEditSaveTimer;
-            self.removeRow( grid.rowEditErrorRows, gridRow );
-            self.removeRow( grid.rowEditDirtyRows, gridRow );
+            self.removeRow( grid.rowEdit.errorRows, gridRow );
+            self.removeRow( grid.rowEdit.dirtyRows, gridRow );
           };
         },
 
@@ -295,11 +298,11 @@
 
             gridRow.isError = true;
 
-            if (!grid.rowEditErrorRows){
-              grid.rowEditErrorRows = [];
+            if (!grid.rowEdit.errorRows){
+              grid.rowEdit.errorRows = [];
             }
-            if (!service.isRowPresent( grid.rowEditErrorRows, gridRow ) ){
-              grid.rowEditErrorRows.push( gridRow );
+            if (!service.isRowPresent( grid.rowEdit.errorRows, gridRow ) ){
+              grid.rowEdit.errorRows.push( gridRow );
             }
           };
         },
@@ -310,7 +313,7 @@
          * @methodOf ui.grid.rowEdit.service:uiGridRowEditService
          * @name removeRow
          * @description  Removes a row from a cache of rows - either
-         * grid.rowEditErrorRows or grid.rowEditDirtyRows.  If the row
+         * grid.rowEdit.errorRows or grid.rowEdit.dirtyRows.  If the row
          * is not present silently does nothing. 
          * @param {array} rowArray the array from which to remove the row
          * @param {GridRow} gridRow the row that should be removed
@@ -361,7 +364,7 @@
          */
         flushDirtyRows: function(grid){
           var promises = [];
-          angular.forEach(grid.rowEditDirtyRows, function( gridRow ){
+          angular.forEach(grid.rowEdit.dirtyRows, function( gridRow ){
             service.saveRow( grid, gridRow )();
             promises.push( gridRow.rowEditSavePromise );
           });
@@ -387,13 +390,13 @@
           if ( !gridRow ){ gridUtil.logError( 'Unable to find rowEntity in grid data, dirty flag cannot be set' ); return; }
 
           if ( newValue !== previousValue || gridRow.isDirty ){
-            if ( !grid.rowEditDirtyRows ){
-              grid.rowEditDirtyRows = [];
+            if ( !grid.rowEdit.dirtyRows ){
+              grid.rowEdit.dirtyRows = [];
             }
 
             if ( !gridRow.isDirty ){
               gridRow.isDirty = true;
-              grid.rowEditDirtyRows.push( gridRow );
+              grid.rowEdit.dirtyRows.push( gridRow );
             }
 
             delete gridRow.isError;
@@ -553,13 +556,13 @@
           myDataRows.forEach( function( value, index ){
             gridRow = grid.getRow( value );
             if ( gridRow ){
-              if ( !grid.rowEditDirtyRows ){
-                grid.rowEditDirtyRows = [];
+              if ( !grid.rowEdit.dirtyRows ){
+                grid.rowEdit.dirtyRows = [];
               }
 
               if ( !gridRow.isDirty ){
                 gridRow.isDirty = true;
-                grid.rowEditDirtyRows.push( gridRow );
+                grid.rowEdit.dirtyRows.push( gridRow );
               }
 
               delete gridRow.isError;