Skip to content

Commit e8e31ce

Browse files
PaulL1PaulL1
committed
Fix #1685: Remove col.index from most code, add col.uid
Tidies up much of the column behaviour. Removed col.index everywhere it appears, except for in the cell content templates. For the cell content, replace with col.uid, which is now uniquely generated when the column is created, and never changed again. Should also fix #1694, but need to push to be sure.
1 parent 7454408 commit e8e31ce

File tree

14 files changed

+96
-98
lines changed

14 files changed

+96
-98
lines changed

‎misc/tutorial/303_customizing_column_menu.ngdoc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ The column menu will add the column's `GridColumn` object to the context as `thi
1212
You can then show/hide the the menu item based on conditions that use the grid and column. You could
1313
also use a custom column builder to add some item to the every column definition.
1414

15-
You can remove the column hide option using the `disableHiding` columnDef option. You can disable
15+
You can remove the column hide option using the `disableHiding` columnDef option, which will also prevent
16+
this column being hidden in the gridMenu (once it is finished and merged). You can disable
1617
the column menu entirely using the `disableColumnMenu` columnDef option.
1718

1819
You can supply an icon class with the `icon` property.

‎src/features/cellnav/js/cellnav.js‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -354,11 +354,11 @@
354354
var args = {};
355355

356356
if (gridRow !== null) {
357-
args.y = { percentage: gridRow.index / grid.renderContainers.body.visibleRowCache.length };
357+
args.y = { percentage: grid.renderContainers.body.visibleRowCache.indexOf(gridRow) / grid.renderContainers.body.visibleRowCache.length };
358358
}
359359

360360
if (gridCol !== null) {
361-
args.x = { percentage: this.getLeftWidth(grid, gridCol.index) / this.getLeftWidth(grid, grid.renderContainers.body.visibleColumnCache.length - 1) };
361+
args.x = { percentage: this.getLeftWidth(grid, gridCol) / this.getLeftWidth(grid, grid.renderContainers.body.visibleColumnCache[grid.renderContainers.body.visibleColumnCache.length - 1] ) };
362362
}
363363

364364
if (args.y || args.x) {
@@ -371,26 +371,37 @@
371371
* @methodOf ui.grid.cellNav.service:uiGridCellNavService
372372
* @name getLeftWidth
373373
* @description Get the current drawn width of the columns in the
374-
* grid up to and including the numbered column
374+
* grid up to the numbered column, and add an apportionment for the
375+
* column that we're on. So if we are on column 0, we want to scroll
376+
* 0% (i.e. exclude this column from calc). If we're on the last column
377+
* we want to scroll to 100% (i.e. include this column in the calc). So
378+
* we include (thisColIndex / totalNumberCols) % of this column width
375379
* @param {Grid} grid the grid you'd like to act upon, usually available
376380
* from gridApi.grid
377-
* @param {object} colIndex the column to total up to and including
381+
* @param {gridCol} upToCol the column to total up to and including
378382
*/
379-
getLeftWidth: function (grid, colIndex) {
383+
getLeftWidth: function (grid, upToCol) {
380384
var width = 0;
381385

382-
if (!colIndex) {
383-
return;
386+
if (!upToCol) {
387+
return width;
384388
}
385-
386-
for (var i = 0; i <= colIndex; i++) {
387-
if (grid.renderContainers.body.visibleColumnCache[i].drawnWidth) {
388-
width += grid.renderContainers.body.visibleColumnCache[i].drawnWidth;
389+
390+
var lastIndex = grid.renderContainers.body.visibleColumnCache.indexOf( upToCol );
391+
392+
// total column widths up-to but not including the passed in column
393+
grid.renderContainers.body.visibleColumnCache.forEach( function( col, index ) {
394+
if ( index < lastIndex ){
395+
width += col.drawnWidth;
389396
}
390-
}
397+
});
398+
399+
// pro-rata the final column based on % of total columns.
400+
var percentage = lastIndex === 0 ? 0 : (lastIndex + 1) / grid.renderContainers.body.visibleColumnCache.length;
401+
width += upToCol.drawnWidth * percentage;
402+
391403
return width;
392404
}
393-
394405
};
395406

396407
return service;
@@ -516,7 +527,6 @@
516527

517528
var rowCol = $scope.colContainer.cellNav.getNextRowCol(direction, $scope.row, $scope.col);
518529

519-
//$log.debug('next row ' + rowCol.row.index + ' next Col ' + rowCol.col.colDef.name);
520530
uiGridCtrl.cellNav.broadcastCellNav(rowCol);
521531
setTabEnabled();
522532

@@ -534,7 +544,6 @@
534544
$scope.$on(uiGridCellNavConstants.CELL_NAV_EVENT, function (evt, rowCol) {
535545
if (rowCol.row === $scope.row &&
536546
rowCol.col === $scope.col) {
537-
// $log.debug('Setting focus on Row ' + rowCol.row.index + ' Col ' + rowCol.col.colDef.name);
538547
setFocused();
539548
}
540549
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ describe('ui.grid.edit uiGridCellNavService', function () {
182182
it('should request scroll to row and column', function () {
183183
uiGridCellNavService.scrollTo( grid, $scope, grid.options.data[2], grid.columns[1].colDef);
184184

185-
expect(args).toEqual( { y : { percentage : 2/3 }, x : { percentage : 300/600 } });
185+
expect(args).toEqual( { y : { percentage : 2/3 }, x : { percentage : (100 + 2/3 * 200)/600 } });
186186
});
187187

188188
it('should request scroll to row only', function () {
@@ -192,9 +192,9 @@ describe('ui.grid.edit uiGridCellNavService', function () {
192192
});
193193

194194
it('should request scroll to column only', function () {
195-
uiGridCellNavService.scrollTo( grid, $scope, null, grid.columns[1].colDef);
195+
uiGridCellNavService.scrollTo( grid, $scope, null, grid.columns[0].colDef);
196196

197-
expect(args).toEqual( { x : { percentage : 300/600 } });
197+
expect(args).toEqual( { x : { percentage : 0 } });
198198
});
199199

200200
it('should request no scroll as no row or column', function () {

‎src/features/edit/templates/cellEditor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div>
22
<form name="inputForm">
3-
<input type="{{inputType}}" ng-class="'colt' + col.index" ui-grid-editor ng-model="MODEL_COL_FIELD" />
3+
<input type="{{inputType}}" ng-class="'colt' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" />
44
</form>
55
</div>

‎src/features/edit/templates/dropdownEditor.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div>
22
<form name="inputForm">
3-
<select ng-class="'colt' + col.index" ui-grid-edit-dropdown ng-model="MODEL_COL_FIELD" ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray"></select>
3+
<select ng-class="'colt' + col.uid" ui-grid-edit-dropdown ng-model="MODEL_COL_FIELD" ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray"></select>
44
</form>
55
</div>

‎src/features/resize-columns/js/ui-grid-column-resizer.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -167,12 +167,11 @@
167167
var otherCol = renderContainer.renderedColumns[$scope.renderIndex - 1];
168168

169169
// Don't append the left resizer if this is the first column or the column to the left of this one has resizing disabled
170-
if (otherCol && $scope.col.index !== 0 && otherCol.colDef.enableColumnResizing !== false) {
170+
if (otherCol && renderContainer.visibleColumnCache.indexOf($scope.col) !== 0 && otherCol.colDef.enableColumnResizing !== false) {
171171
$elm.prepend(resizerLeft);
172172
}
173173

174174
// Don't append the right resizer if this column has resizing disabled
175-
//if ($scope.col.index !== $scope.grid.renderedColumns.length - 1 && $scope.col.colDef.enableColumnResizing !== false) {
176175
if ($scope.col.colDef.enableColumnResizing !== false) {
177176
$elm.append(resizerRight);
178177
}
@@ -259,7 +258,7 @@
259258

260259
renderContainer.visibleColumnCache.forEach(function (column) {
261260
// Skip the column we just resized
262-
if (column.index === col.index) { return; }
261+
if (column === col) { return; }
263262

264263
var colDef = column.colDef;
265264
if (!colDef.width || (angular.isString(colDef.width) && (colDef.width.indexOf('*') !== -1 || colDef.width.indexOf('%') !== -1))) {
@@ -446,7 +445,7 @@
446445
var renderContainerElm = gridUtil.closestElm($elm, '.ui-grid-render-container');
447446

448447
// Get the cell contents so we measure correctly. For the header cell we have to account for the sort icon and the menu buttons, if present
449-
var cells = renderContainerElm.querySelectorAll('.' + uiGridConstants.COL_CLASS_PREFIX + col.index + ' .ui-grid-cell-contents');
448+
var cells = renderContainerElm.querySelectorAll('.' + uiGridConstants.COL_CLASS_PREFIX + col.uid + ' .ui-grid-cell-contents');
450449
Array.prototype.forEach.call(cells, function (cell) {
451450
// Get the cell width
452451
// $log.debug('width', gridUtil.elementWidth(cell));

‎src/features/resize-columns/test/resizeColumns.spec.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ describe('ui.grid.resizeColumns', function () {
1818

1919
$scope.gridOpts = {
2020
enableColumnResizing: true,
21-
data: data
21+
data: data,
22+
onRegisterApi: function(gridApi){ $scope.gridApi = gridApi; }
2223
};
2324

2425
recompile = function () {
@@ -100,15 +101,15 @@ describe('ui.grid.resizeColumns', function () {
100101
xit('should resize the column to the maximum width of the rendered columns', function (done) {
101102
var firstResizer = $(grid).find('[ui-grid-column-resizer]').first();
102103

103-
var colWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
104+
var colWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid).first().width();
104105

105106
expect(colWidth === 166 || colWidth === 167).toBe(true); // allow for column widths that don't equally divide
106107

107108
firstResizer.trigger('dblclick');
108109

109110
$scope.$digest();
110111

111-
var newColWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
112+
var newColWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid).first().width();
112113

113114
// Can't really tell how big the columns SHOULD be, we'll just expect them to be different in width now
114115
expect(newColWidth).not.toEqual(colWidth);
@@ -137,7 +138,7 @@ describe('ui.grid.resizeColumns', function () {
137138
var firstResizer = $(grid).find('[ui-grid-column-resizer]').first();
138139

139140
// Get the initial width of the column
140-
initialWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
141+
initialWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid).first().width();
141142

142143
initialX = firstResizer.position().left;
143144

@@ -176,7 +177,7 @@ describe('ui.grid.resizeColumns', function () {
176177
});
177178

178179
it('should cause the column to resize by the amount change in the X axis', function () {
179-
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
180+
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid ).first().width();
180181

181182
expect(newWidth - initialWidth).toEqual(xDiff);
182183
});
@@ -212,7 +213,7 @@ describe('ui.grid.resizeColumns', function () {
212213
$(firstResizer).simulate('dblclick');
213214
$scope.$digest();
214215

215-
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
216+
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid).first().width();
216217

217218
expect(newWidth >= minWidth).toEqual(true);
218219
});
@@ -233,7 +234,7 @@ describe('ui.grid.resizeColumns', function () {
233234
});
234235

235236
it('should not go below the minWidth', function () {
236-
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
237+
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid).first().width();
237238

238239
expect(newWidth >= minWidth).toEqual(true);
239240
});
@@ -262,7 +263,7 @@ describe('ui.grid.resizeColumns', function () {
262263
$(firstResizer).simulate('dblclick');
263264
$scope.$digest();
264265

265-
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
266+
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid).first().width();
266267

267268
expect(newWidth <= maxWidth).toEqual(true);
268269
});
@@ -283,7 +284,7 @@ describe('ui.grid.resizeColumns', function () {
283284
});
284285

285286
it('should not go above the maxWidth', function () {
286-
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + '0').first().width();
287+
var newWidth = $(grid).find('.' + uiGridConstants.COL_CLASS_PREFIX + $scope.gridApi.grid.columns[0].uid).first().width();
287288

288289
expect(newWidth <= maxWidth).toEqual(true);
289290
});

‎src/js/core/directives/ui-grid-column-menu.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ angular.module('ui.grid').directive('uiGridColumnMenu', ['$log', '$timeout', '$w
8989
* @ngdoc boolean
9090
* @name disableHiding
9191
* @propertyOf ui.grid.class:GridOptions.columnDef
92-
* @description (optional) True by default. When enabled, this setting allows a user to hide the column
93-
* using the column menu.
92+
* @description (optional) False by default. When enabled, this setting prevents a user from hiding the column
93+
* using the column menu or the grid menu.
9494
*/
9595
$scope.hideable = function() {
9696
if (typeof($scope.col) !== 'undefined' && $scope.col && $scope.col.colDef && $scope.col.colDef.disableHiding) {

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,6 @@
4141

4242

4343
$elm.addClass($scope.col.getColClass(false));
44-
// shane - No need for watch now that we trackby col name
45-
// $scope.$watch('col.index', function (newValue, oldValue) {
46-
// if (newValue === oldValue) { return; }
47-
// var className = $elm.attr('class');
48-
// className = className.replace(uiGridConstants.COL_CLASS_PREFIX + oldValue, uiGridConstants.COL_CLASS_PREFIX + newValue);
49-
// $elm.attr('class', className);
50-
// });
5144

5245
// Hide the menu by default
5346
$scope.menuShown = false;

‎src/js/core/directives/ui-grid-header.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@
129129

130130
column.drawnWidth = column.width;
131131

132-
// ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + column.width + 'px; }';
133132
}
134133
});
135134

@@ -155,8 +154,6 @@
155154
canvasWidth += colWidth;
156155
column.drawnWidth = colWidth;
157156

158-
// ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
159-
160157
// Remove this element from the percent array so it's not processed below
161158
percentArray.splice(i, 1);
162159
}
@@ -168,8 +165,6 @@
168165
canvasWidth += colWidth;
169166
column.drawnWidth = colWidth;
170167

171-
// ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
172-
173168
// Remove this element from the percent array so it's not processed below
174169
percentArray.splice(i, 1);
175170
}
@@ -182,8 +177,6 @@
182177
canvasWidth += colWidth;
183178

184179
column.drawnWidth = colWidth;
185-
186-
// ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
187180
});
188181
}
189182

@@ -205,8 +198,6 @@
205198
canvasWidth += colWidth;
206199
column.drawnWidth = colWidth;
207200

208-
// ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
209-
210201
lastColumn = column;
211202

212203
// Remove this element from the percent array so it's not processed below
@@ -221,8 +212,6 @@
221212
canvasWidth += colWidth;
222213
column.drawnWidth = colWidth;
223214

224-
// ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
225-
226215
// Remove this element from the percent array so it's not processed below
227216
asterisksArray.splice(i, 1);
228217
}
@@ -237,8 +226,6 @@
237226
canvasWidth += colWidth;
238227

239228
column.drawnWidth = colWidth;
240-
241-
// ret = ret + ' .grid' + uiGridCtrl.grid.id + ' .col' + column.index + ' { width: ' + colWidth + 'px; }';
242229
});
243230
}
244231

0 commit comments

Comments
 (0)