Skip to content

Commit abe6e3e

Browse files
Portugal, Marcelomportuga
Portugal, Marcelo
authored and
mportuga
committed
docs(GridColumns): Document show/hide column methods.
fix #3902
1 parent d7a71f8 commit abe6e3e

File tree

1 file changed

+78
-56
lines changed

1 file changed

+78
-56
lines changed

‎misc/tutorial/113_adding_and_removing_columns.ngdoc

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
@ngdoc overview
22
@name Tutorial: 113 Adding and removing columns
3-
@description
3+
@description
44

55
You can dynamically add and remove columns, the grid watches the column defs and
66
updates appropriately. The columns are by default shown in the order of the columnDefs,
7-
although if/when the column move feature arrives the end user will be able to alter
7+
although if/when the column move feature arrives the end user will be able to alter
88
that default.
99

1010
You can dynamically change the display name on a column (along with some other column
11-
def properties), and call the notifyDataChange api to force an update.
11+
def properties), and call the {@link api/ui.grid.core.api:PublicApi#notifyDataChange notifyDataChange}
12+
api to force an update.
13+
14+
The recommended way to change the display of a column is to take advantage of the
15+
{@link api/ui.grid.class:GridColumn#hideColum hideColum} and
16+
{@link api/ui.grid.class:GridColumn#showColumn showColumn} functions
17+
that are provided as part of the GridColumn object. However, it is worth mentioning, that
18+
this will still require you to call notifyDataChange afterwardsin order to refresh the grid.
19+
This is done as a way to allow you to perform multiple toggle operations prior to updating
20+
the grid, which is a way to reduce the amount of $digest cycles that we trigger and improve
21+
performance.
1222

1323
For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
1424
<pre>
@@ -19,67 +29,79 @@ For better performance with the following example, you can choose to load the ui
1929
<example module="app">
2030
<file name="app.js">
2131
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
22-
23-
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
24-
$scope.columns = [{ field: 'name' }, { field: 'gender' }];
25-
$scope.gridOptions = {
32+
33+
app.controller('MainCtrl', function MainCtrl($scope, $http, uiGridConstants) {
34+
var vm = this;
35+
36+
vm.columns = [{ field: 'name' }, { field: 'gender' }];
37+
vm.gridOptions = {
2638
enableSorting: true,
27-
columnDefs: $scope.columns,
39+
columnDefs: vm.columns,
2840
onRegisterApi: function(gridApi) {
29-
$scope.gridApi = gridApi;
41+
vm.gridApi = gridApi;
3042
}
3143
};
32-
33-
$scope.remove = function() {
34-
$scope.columns.splice($scope.columns.length-1, 1);
35-
}
36-
37-
$scope.add = function() {
38-
$scope.columns.push({ field: 'company', enableSorting: false });
39-
}
40-
41-
$scope.splice = function() {
42-
$scope.columns.splice(1, 0, { field: 'company', enableSorting: false });
43-
}
44-
45-
$scope.unsplice = function() {
46-
$scope.columns.splice(1, 1);
47-
}
48-
49-
$scope.toggleDisplayName = function() {
50-
if( $scope.columns[1].displayName === 'GENDER' ){
51-
$scope.columns[1].displayName = 'Gender';
44+
45+
vm.remove = function() {
46+
vm.columns.splice($scope.columns.length-1, 1);
47+
};
48+
49+
vm.add = function() {
50+
vm.columns.push({ field: 'company', enableSorting: false });
51+
};
52+
53+
vm.splice = function() {
54+
vm.columns.splice(1, 0, { field: 'company', enableSorting: false });
55+
};
56+
57+
vm.unsplice = function() {
58+
vm.columns.splice(1, 1);
59+
};
60+
61+
vm.toggleDisplayName = function() {
62+
if( vm.columns[1].displayName === 'GENDER' ){
63+
vm.columns[1].displayName = 'Gender';
5264
} else {
53-
$scope.columns[1].displayName = 'GENDER';
65+
vm.columns[1].displayName = 'GENDER';
5466
}
55-
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
56-
}
57-
58-
$scope.toggleVisible = function() {
59-
$scope.columns[0].visible = !($scope.columns[0].visible || $scope.columns[0].visible === undefined);
60-
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
61-
}
62-
67+
vm.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
68+
};
69+
70+
vm.toggleVisible = function() {
71+
var firstColumn = vm.gridApi.grid.columns[0];
72+
73+
if (firstColumn.visible) {
74+
firstColumn.hideColumn();
75+
} else {
76+
firstColumn.showColumn();
77+
}
78+
vm.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
79+
};
80+
6381
$http.get('/data/100.json')
6482
.then(function(response) {
65-
$scope.gridOptions.data = response.data;
83+
vm.gridOptions.data = response.data;
6684
});
67-
}]);
85+
86+
$scope.$on('$destroy', function() {
87+
vm.gridApi = null;
88+
});
89+
});
6890
</file>
6991
<file name="index.html">
70-
<div ng-controller="MainCtrl">
92+
<div ng-controller="MainCtrl as $ctrl">
7193
Try clicking the Add button to add the company column.
7294
Try clicking the Remove button to remove the last column.
7395
Try clicking the Splice button to insert a column in the middle.
7496
<br>
7597
<br>
76-
<button id="button_add" class="btn" ng-click="add()">Add</button>
77-
<button id="button_remove" class="btn" ng-click="remove()">Remove Last</button>
78-
<button id="button_splice" class="btn" ng-click="splice()">Splice</button>
79-
<button id="button_unsplice" class="btn" ng-click="unsplice()">Remove Middle</button>
80-
<button id="button_toggle_visible" class="btn" ng-click="toggleVisible()">Toggle Visible</button>
81-
<button id="button_toggle_display_name" class="btn" ng-click="toggleDisplayName()">Toggle Display Name</button>
82-
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
98+
<button id="button_add" class="btn btn-default" ng-click="$ctrl.add()">Add</button>
99+
<button id="button_remove" class="btn btn-default" ng-click="$ctrl.remove()">Remove Last</button>
100+
<button id="button_splice" class="btn btn-default" ng-click="$ctrl.splice()">Splice</button>
101+
<button id="button_unsplice" class="btn btn-default" ng-click="$ctrl.unsplice()">Remove Middle</button>
102+
<button id="button_toggle_visible" class="btn btn-default" ng-click="$ctrl.toggleVisible()">Toggle Visible</button>
103+
<button id="button_toggle_display_name" class="btn btn-default" ng-click="$ctrl.toggleDisplayName()">Toggle Display Name</button>
104+
<div id="grid1" ui-grid="$ctrl.gridOptions" class="grid"></div>
83105
</div>
84106
</file>
85107
<file name="main.css">
@@ -94,7 +116,7 @@ For better performance with the following example, you can choose to load the ui
94116
it('grid should have two visible columns', function () {
95117
gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
96118
});
97-
119+
98120
it('add and remove columns from end, grid updates accordingly', function () {
99121
element(by.id('button_add')).click();
100122
gridTestUtils.expectHeaderColumnCount( 'grid1', 3 );
@@ -104,7 +126,7 @@ For better performance with the following example, you can choose to load the ui
104126
element(by.id('button_remove')).click();
105127
gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
106128
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
107-
});
129+
});
108130

109131
it('add and remove columns in middle, grid updates accordingly', function () {
110132
element(by.id('button_splice')).click();
@@ -115,8 +137,8 @@ For better performance with the following example, you can choose to load the ui
115137
element(by.id('button_unsplice')).click();
116138
gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
117139
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
118-
});
119-
140+
});
141+
120142
it('toggle column 0 visible should make column appear and disappear', function () {
121143
element(by.id('button_toggle_visible')).click();
122144
gridTestUtils.expectHeaderColumnCount( 'grid1', 1 );
@@ -125,15 +147,15 @@ For better performance with the following example, you can choose to load the ui
125147
element(by.id('button_toggle_visible')).click();
126148
gridTestUtils.expectHeaderColumnCount( 'grid1', 2 );
127149
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Name' );
128-
});
150+
});
129151

130152
it('toggle display name should change column header', function () {
131153
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
132154
element(by.id('button_toggle_display_name')).click();
133155
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'GENDER' );
134156
element(by.id('button_toggle_display_name')).click();
135157
gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' );
136-
});
137-
});
158+
});
159+
});
138160
</file>
139-
</example>
161+
</example>

0 commit comments

Comments
 (0)