Skip to content

Commit f7d4e2b

Browse files
PaulL1PaulL1
committed
Fix #2049(columnDef): don't change user-provided column def
Also includes capability for columns to be dynamically set to visible and not visible with a callback provided so that the grid will give effect to that. Refer tutorial 113.
1 parent 27ae648 commit f7d4e2b

File tree

7 files changed

+62
-28
lines changed

7 files changed

+62
-28
lines changed

‎misc/tutorial/113_adding_and_removing_columns.ngdoc‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,33 +12,40 @@ that default.
1212
<file name="app.js">
1313
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
1414

15-
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
15+
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
1616
$scope.columns = [{ field: 'name' }, { field: 'gender' }];
1717
$scope.gridOptions = {
1818
enableSorting: true,
19-
columnDefs: $scope.columns
19+
columnDefs: $scope.columns,
20+
onRegisterApi: function(gridApi) {
21+
$scope.gridApi = gridApi;
22+
}
2023
};
2124

2225
$scope.remove = function() {
23-
$scope.columns.splice($scope.columns.length-1, 1);
26+
$scope.columns.splice($scope.columns.length-1, 1);
2427
}
2528

2629
$scope.add = function() {
27-
$scope.columns.push({ field: 'company', enableSorting: false });
30+
$scope.columns.push({ field: 'company', enableSorting: false });
2831
}
2932

3033
$scope.splice = function() {
31-
$scope.columns.splice(1, 0, { field: 'company', enableSorting: false });
34+
$scope.columns.splice(1, 0, { field: 'company', enableSorting: false });
3235
}
3336

3437
$scope.unsplice = function() {
35-
$scope.columns.splice(1, 1);
38+
$scope.columns.splice(1, 1);
39+
}
40+
41+
$scope.toggleVisible = function() {
42+
$scope.columns[0].visible = !($scope.columns[0].visible || $scope.columns[0].visible === undefined);
43+
$scope.gridApi.core.notifyDataChange($scope.gridApi.grid, uiGridConstants.dataChange.COLUMN);
3644
}
3745

3846
$http.get('/data/100.json')
3947
.success(function(data) {
4048
$scope.gridOptions.data = data;
41-
console.log(data)
4249
});
4350
}]);
4451
</file>
@@ -53,6 +60,7 @@ that default.
5360
<button id="button_remove" class="btn" ng-click="remove()">Remove Last</button>
5461
<button id="button_splice" class="btn" ng-click="splice()">Splice</button>
5562
<button id="button_unsplice" class="btn" ng-click="unsplice()">Remove Middle</button>
63+
<button id="button_toggle_visible" class="btn" ng-click="toggleVisible()">Toggle Visible</button>
5664
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
5765
</div>
5866
</file>
@@ -89,7 +97,17 @@ that default.
8997
element(by.id('button_unsplice')).click();
9098
gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
9199
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
92-
});
100+
});
101+
102+
it('toggle column 0 visible should make column appear and disappear', function () {
103+
element(by.id('button_toggle_visible')).click();
104+
gridTestUtils.expectHeaderColumnCount( 'grid1', 1 );
105+
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Gender' );
106+
107+
element(by.id('button_toggle_visible')).click();
108+
gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
109+
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Name' );
110+
});
93111
});
94112
</file>
95113
</example>

‎src/features/importer/test/importer.spec.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
169169

170170
grid.modifyRows($scope.data);
171171
angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) {
172-
callback( grid );
172+
callback.callback( grid );
173173
});
174174

175175
expect( $scope.data.length ).toEqual(4, 'data should now have 4 rows');
@@ -194,7 +194,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
194194

195195
grid.modifyRows($scope.data);
196196
angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) {
197-
callback( grid );
197+
callback.callback( grid );
198198
});
199199

200200
expect( $scope.data.length ).toEqual(4, 'data should now have 4 rows');
@@ -263,7 +263,7 @@ describe('ui.grid.importer uiGridImporterService', function () {
263263

264264
grid.modifyRows($scope.data);
265265
angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) {
266-
callback( grid );
266+
callback.callback( grid );
267267
});
268268

269269
expect( $scope.data.length ).toEqual(5, 'data should now have 5 rows');

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,6 @@
5656
self.grid.preCompileCellTemplates();
5757

5858
self.grid.callDataChangeCallbacks(uiGridConstants.dataChange.COLUMN);
59-
60-
self.grid.refresh();
6159
});
6260
}
6361
}

‎src/js/core/factories/Grid.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,8 @@ angular.module('ui.grid')
228228
*
229229
*/
230230
self.api.registerMethod( 'core', 'notifyDataChange', this.notifyDataChange );
231+
232+
self.registerDataChangeCallback( self.columnRefreshCallback, [uiGridConstants.dataChange.COLUMN]);
231233
};
232234

233235
/**
@@ -335,7 +337,7 @@ angular.module('ui.grid')
335337
* @param {number} type the type of event that occurred - one of the
336338
* uiGridConstants.dataChange values (ALL, ROW, EDIT, COLUMN)
337339
*/
338-
Grid.prototype.callDataChangeCallbacks = function callDataChangeCallbacks(type) {
340+
Grid.prototype.callDataChangeCallbacks = function callDataChangeCallbacks(type, options) {
339341
angular.forEach( this.dataChangeCallbacks, function( callback, uid ){
340342
if ( callback.types.indexOf( uiGridConstants.dataChange.ALL ) !== -1 ||
341343
callback.types.indexOf( type ) !== -1 ||
@@ -367,6 +369,19 @@ angular.module('ui.grid')
367369
gridUtil.logError("Notified of a data change, but the type was not recognised, so no action taken, type was: " + type);
368370
}
369371
};
372+
373+
374+
/**
375+
* @ngdoc function
376+
* @name columnRefreshCallback
377+
* @methodOf ui.grid.class:Grid
378+
* @description refreshes the grid when a column refresh
379+
* is notified, which triggers handling of the visible flag
380+
* @param {string} name column name
381+
*/
382+
Grid.prototype.columnRefreshCallback = function columnRefreshCallback( grid ){
383+
grid.refresh();
384+
};
370385

371386

372387
/**

‎src/js/core/services/gridClassFactory.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,9 @@
110110
*
111111
*/
112112
if (!colDef.headerCellTemplate) {
113-
colDef.headerCellTemplate = 'ui-grid/uiGridHeaderCell';
113+
col.headerCellTemplate = 'ui-grid/uiGridHeaderCell';
114+
} else {
115+
col.headerCellTemplate = colDef.headerCellTemplate;
114116
}
115117

116118
/**
@@ -123,11 +125,12 @@
123125
*
124126
*/
125127
if (!colDef.cellTemplate) {
126-
colDef.cellTemplate = 'ui-grid/uiGridCell';
127-
col.cellTemplatePromise = gridUtil.getTemplate(colDef.cellTemplate);
128+
col.cellTemplate = 'ui-grid/uiGridCell';
129+
} else {
130+
col.cellTemplate = colDef.cellTemplate;
128131
}
129132

130-
col.cellTemplatePromise = gridUtil.getTemplate(colDef.cellTemplate);
133+
col.cellTemplatePromise = gridUtil.getTemplate(col.cellTemplate);
131134
templateGetPromises.push(col.cellTemplatePromise
132135
.then(
133136
function (template) {
@@ -138,7 +141,7 @@
138141
})
139142
);
140143

141-
templateGetPromises.push(gridUtil.getTemplate(colDef.headerCellTemplate)
144+
templateGetPromises.push(gridUtil.getTemplate(col.headerCellTemplate)
142145
.then(
143146
function (template) {
144147
col.headerCellTemplate = template.replace(uiGridConstants.CUSTOM_FILTERS, col.headerCellFilter ? "|" + col.headerCellFilter : "");

‎test/unit/core/factories/Grid.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -602,7 +602,7 @@ describe('Grid factory', function () {
602602
expect( grid.dataChangeCallbacks[uid]).toEqual( { callback: jasmine.any(Function), types: [ uiGridConstants.dataChange.ALL ] } );
603603

604604
grid.deregisterDataChangeCallback( uid );
605-
expect( grid.dataChangeCallbacks ).toEqual( {} );
605+
expect( grid.dataChangeCallbacks[uid] ).toEqual( undefined );
606606
});
607607

608608
describe( 'mix of callbacks being called', function() {

‎test/unit/core/services/GridClassFactory.spec.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ describe('gridClassFactory', function() {
3838

3939
gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions );
4040

41-
expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
42-
expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell');
41+
expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
42+
expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell');
4343

4444
testSetup.$rootScope.$digest();
4545

@@ -53,8 +53,8 @@ describe('gridClassFactory', function() {
5353

5454
gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions );
5555

56-
expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
57-
expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell');
56+
expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
57+
expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell');
5858

5959
testSetup.$rootScope.$digest();
6060

@@ -71,8 +71,8 @@ describe('gridClassFactory', function() {
7171

7272
gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions );
7373

74-
expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
75-
expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell');
74+
expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
75+
expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell');
7676

7777
testSetup.$rootScope.$digest();
7878

@@ -89,8 +89,8 @@ describe('gridClassFactory', function() {
8989

9090
gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions );
9191

92-
expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
93-
expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell');
92+
expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell');
93+
expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell');
9494

9595
testSetup.$rootScope.$digest();
9696

0 commit comments

Comments
 (0)