fix(core): add row headers in order

grid.addRowHeader api now takes a 2nd parameter, order, that is used to insert the row header in proper order. For example, the order is now Grouping/Treeview row header, Expandable row header, then Selection row header if you use those features. Also, expandable RowHeader is now hidden for Group summary rows BREAKING CHANGE: It is possible that your application will show row headers in a different order after this change. If you are adding rowHeaders, use the new order parameter in grid.addRowHeader(colDef, order) to specify where you want the header column.
angular-ui · Feb 22, 2016 · 572766d · 572766d
1 parent 2762eda
commit 572766d
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 54 deletions.
diff --git a/src/features/expandable/js/expandable.js b/src/features/expandable/js/expandable.js
@@ -335,7 +335,7 @@
                 };
                 expandableRowHeaderColDef.cellTemplate = $templateCache.get('ui-grid/expandableRowHeader');
                 expandableRowHeaderColDef.headerCellTemplate = $templateCache.get('ui-grid/expandableTopRowHeader');
-                uiGridCtrl.grid.addRowHeaderColumn(expandableRowHeaderColDef);
+                uiGridCtrl.grid.addRowHeaderColumn(expandableRowHeaderColDef, -90);
               }
               uiGridExpandableService.initializeGrid(uiGridCtrl.grid);
             },

diff --git a/src/features/expandable/templates/expandableRowHeader.html b/src/features/expandable/templates/expandableRowHeader.html
@@ -2,7 +2,7 @@
   class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
   <div
     class="ui-grid-cell-contents">
-    <i
+    <i ng-if="!row.groupHeader==true"
       ng-class="{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }"
       ng-click="grid.api.expandable.toggleRowExpansion(row.entity)">
     </i>

diff --git a/src/features/grouping/js/grouping.js b/src/features/grouping/js/grouping.js
@@ -619,7 +619,7 @@
         columns.sort(function(a, b){
           var a_group, b_group;
           if (a.isRowHeader){
-            a_group = -1000;
+            a_group = a.headerPriority;
           }
           else if ( typeof(a.grouping) === 'undefined' || typeof(a.grouping.groupPriority) === 'undefined' || a.grouping.groupPriority < 0){
             a_group = null;
@@ -628,7 +628,7 @@
           }
 
           if (b.isRowHeader){
-            b_group = -1000;
+            b_group = b.headerPriority;
           }
           else if ( typeof(b.grouping) === 'undefined' || typeof(b.grouping.groupPriority) === 'undefined' || b.grouping.groupPriority < 0){
             b_group = null;

diff --git a/src/features/grouping/test/grouping.spec.js b/src/features/grouping/test/grouping.spec.js
@@ -85,7 +85,7 @@ describe('ui.grid.grouping uiGridGroupingService', function () {
     it( 'will not move header columns', function() {
 
       $timeout(function () {
-        grid.addRowHeaderColumn({name:'aRowHeader'});
+        grid.addRowHeaderColumn({name:'aRowHeader'}, -200);
       });
       $timeout.flush();
 

diff --git a/src/features/selection/js/selection.js b/src/features/selection/js/selection.js
@@ -667,7 +667,7 @@
                   allowCellFocus: true
                 };
 
-                uiGridCtrl.grid.addRowHeaderColumn(selectionRowHeaderDef);
+                uiGridCtrl.grid.addRowHeaderColumn(selectionRowHeaderDef, 0);
               }
 
               var processorSet = false;

diff --git a/src/features/tree-base/js/tree-base.js b/src/features/tree-base/js/tree-base.js
@@ -461,7 +461,7 @@
          *  @ngdoc object
          *  @name showTreeRowHeader
          *  @propertyOf  ui.grid.treeBase.api:GridOptions
-         *  @description If set to false, don't create the row header.  Youll need to programatically control the expand
+         *  @description If set to false, don't create the row header.  You'll need to programmatically control the expand
          *  states
          *  <br/>Defaults to true
          */
@@ -715,7 +715,7 @@
         };
 
         rowHeaderColumnDef.visible = grid.options.treeRowHeaderAlwaysVisible;
-        grid.addRowHeaderColumn( rowHeaderColumnDef );
+        grid.addRowHeaderColumn( rowHeaderColumnDef, -100 );
       },
 
 

diff --git a/src/js/core/factories/Grid.js b/src/js/core/factories/Grid.js
@@ -272,6 +272,8 @@ angular.module('ui.grid')
      * @methodOf ui.grid.core.api:PublicApi
      * @description adds a row header column to the grid
      * @param {object} column def
+     * @param {number} order Determines order of header column on grid.  Lower order means header
+     * is positioned to the left of higher order headers
      *
      */
     self.api.registerMethod( 'core', 'addRowHeaderColumn', this.addRowHeaderColumn );
@@ -379,7 +381,7 @@ angular.module('ui.grid')
      * that have sorting on them, sorted in priority order.
      *
      * @param {$scope} scope The scope of the controller. This is used to deregister this event when the scope is destroyed.
-     * @param {Function} callBack Will be called when the event is emited. The function passes back the grid and an array of 
+     * @param {Function} callBack Will be called when the event is emited. The function passes back the grid and an array of
      * columns with sorts on them, in priority order.
      *
      * @example
@@ -754,8 +756,14 @@ angular.module('ui.grid')
   * @description adds a row header column to the grid
   * @param {object} column def
   */
-  Grid.prototype.addRowHeaderColumn = function addRowHeaderColumn(colDef) {
+  Grid.prototype.addRowHeaderColumn = function addRowHeaderColumn(colDef, order) {
     var self = this;
+
+    //default order
+    if (order === undefined) {
+      order = 0;
+    }
+
     var rowHeaderCol = new GridColumn(colDef, gridUtil.nextUid(), self);
     rowHeaderCol.isRowHeader = true;
     if (self.isRTL()) {
@@ -774,7 +782,12 @@ angular.module('ui.grid')
         rowHeaderCol.enableFiltering = false;
         rowHeaderCol.enableSorting = false;
         rowHeaderCol.enableHiding = false;
+        rowHeaderCol.headerPriority = order;
         self.rowHeaderColumns.push(rowHeaderCol);
+        self.rowHeaderColumns = self.rowHeaderColumns.sort(function (a, b) {
+          return a.headerPriority - b.headerPriority;
+        });
+
         self.buildColumns()
           .then( function() {
             self.preCompileCellTemplates();
@@ -836,9 +849,11 @@ angular.module('ui.grid')
     }
 
     //add row header columns to the grid columns array _after_ columns without columnDefs have been removed
-    self.rowHeaderColumns.forEach(function (rowHeaderColumn) {
-      self.columns.unshift(rowHeaderColumn);
-    });
+    //rowHeaderColumns is ordered by priority so insert in reverse
+    for (var j = self.rowHeaderColumns.length - 1; j >= 0; j--) {
+      self.columns.unshift(self.rowHeaderColumns[j]);
+    }
+
 
 
     // look at each column def, and update column properties to match.  If the column def
@@ -898,6 +913,19 @@ angular.module('ui.grid')
     });
   };
 
+  Grid.prototype.preCompileCellTemplate = function(col) {
+    var self = this;
+    var html = col.cellTemplate.replace(uiGridConstants.MODEL_COL_FIELD, self.getQualifiedColField(col));
+    html = html.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)');
+
+    var compiledElementFn = $compile(html);
+    col.compiledElementFn = compiledElementFn;
+
+    if (col.compiledElementFnDefer) {
+      col.compiledElementFnDefer.resolve(col.compiledElementFn);
+    }
+  };
+
 /**
  * @ngdoc function
  * @name preCompileCellTemplates
@@ -906,25 +934,12 @@ angular.module('ui.grid')
  */
   Grid.prototype.preCompileCellTemplates = function() {
     var self = this;
-
-    var preCompileTemplate = function( col ) {
-      var html = col.cellTemplate.replace(uiGridConstants.MODEL_COL_FIELD, self.getQualifiedColField(col));
-      html = html.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)');
-
-      var compiledElementFn = $compile(html);
-      col.compiledElementFn = compiledElementFn;
-
-      if (col.compiledElementFnDefer) {
-        col.compiledElementFnDefer.resolve(col.compiledElementFn);
-      }
-    };
-
-    this.columns.forEach(function (col) {
+    self.columns.forEach(function (col) {
       if ( col.cellTemplate ){
-        preCompileTemplate( col );
+        self.preCompileCellTemplate( col );
       } else if ( col.cellTemplatePromise ){
         col.cellTemplatePromise.then( function() {
-          preCompileTemplate( col );
+          self.preCompileCellTemplate( col );
         });
       }
     });

diff --git a/test/unit/core/factories/Grid.spec.js b/test/unit/core/factories/Grid.spec.js
@@ -294,20 +294,19 @@ describe('Grid factory', function () {
       expect(grid1.columns[5].name).toEqual('5');
     });
 
-    it('should respect the row header', function() {
+    it('should respect the row header in order', function() {
       var columnDefs =  [
         {name:'1'},
-        {name:'2'},
-        {name:'3'},
-        {name:'4'},
-        {name:'5'}
+        {name:'2'}
       ];
 
       var grid1 =  gridClassFactory.createGrid({columnDefs:columnDefs});
 
 
       $timeout(function(){
-        grid1.addRowHeaderColumn({name:'rowHeader'});
+        grid1.addRowHeaderColumn({name:'rowHeader3'},100);
+        grid1.addRowHeaderColumn({name:'rowHeader1'},-100);
+        grid1.addRowHeaderColumn({name:'rowHeader2'},0);
       });
       $timeout.flush();
 
@@ -317,26 +316,12 @@ describe('Grid factory', function () {
       $timeout.flush();
 
 
-      expect(grid1.columns[0].name).toEqual('rowHeader');
-      expect(grid1.columns[1].name).toEqual('1');
-      expect(grid1.columns[2].name).toEqual('2');
-      expect(grid1.columns[3].name).toEqual('3');
-      expect(grid1.columns[4].name).toEqual('4');
-      expect(grid1.columns[5].name).toEqual('5');
+      expect(grid1.columns[0].name).toEqual('rowHeader1');
+      expect(grid1.columns[1].name).toEqual('rowHeader2');
+      expect(grid1.columns[2].name).toEqual('rowHeader3');
+      expect(grid1.columns[3].name).toEqual('1');
+      expect(grid1.columns[4].name).toEqual('2');
 
-      grid1.options.columnDefs.splice(3, 0, {name: '3.5'});
-
-      $timeout(function(){
-        grid1.buildColumns();
-      });
-      $timeout.flush();
-
-      expect(grid1.columns[1].name).toEqual('1');
-      expect(grid1.columns[2].name).toEqual('2');
-      expect(grid1.columns[3].name).toEqual('3');
-      expect(grid1.columns[4].name).toEqual('3.5');
-      expect(grid1.columns[5].name).toEqual('4');
-      expect(grid1.columns[6].name).toEqual('5');
     });
 
     it('add columns at the correct position - start', function() {