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.

Author: swalters

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);
  },

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>

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;

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();
 

src/features/selection/js/selection.js

@@ -667,7 +667,7 @@
  allowCellFocus: true
  };
 
- uiGridCtrl.grid.addRowHeaderColumn(selectionRowHeaderDef);
+ uiGridCtrl.grid.addRowHeaderColumn(selectionRowHeaderDef, 0);
  }
 
  var processorSet = false;

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 );
  },
 
 

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 );
  });
  }
  });

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() {