Skip to content

Commit 343d711

Browse files
Portugal, Marcelomportuga
Portugal, Marcelo
authored and
mportuga
committed
feat(expandAllButton): Add ability to hide expand all button.
fix #6555
1 parent 835153c commit 343d711

File tree

6 files changed

+468
-183
lines changed

6 files changed

+468
-183
lines changed

‎misc/tutorial/216_expandable_grid.ngdoc‎

Lines changed: 157 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -45,17 +45,19 @@ appears when you quickly scroll through the grid.
4545
<file name="app.js">
4646
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);
4747

48-
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
49-
$scope.gridOptions = {
48+
app.controller('MainCtrl', function MainCtrl($http, $log) {
49+
var vm = this;
50+
51+
vm.gridOptions = {
5052
expandableRowTemplate: 'expandableRowTemplate.html',
5153
expandableRowHeight: 150,
5254
//subGridVariable will be available in subGrid scope
5355
expandableRowScope: {
5456
subGridVariable: 'subGridScopeVariable'
5557
}
56-
}
58+
};
5759

58-
$scope.gridOptions.columnDefs = [
60+
vm.gridOptions.columnDefs = [
5961
{ name: 'id' },
6062
{ name: 'name'},
6163
{ name: 'age'},
@@ -68,137 +70,149 @@ appears when you quickly scroll through the grid.
6870

6971
for(i = 0; i < data.length; i++){
7072
data[i].subGridOptions = {
71-
columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
73+
columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
7274
data: data[i].friends
73-
}
75+
};
7476
}
75-
$scope.gridOptions.data = data;
77+
vm.gridOptions.data = data;
7678
});
7779

78-
$scope.gridOptions.onRegisterApi = function(gridApi){
79-
$scope.gridApi = gridApi;
80+
vm.gridOptions.onRegisterApi = function(gridApi){
81+
vm.gridApi = gridApi;
8082
};
8183

82-
$scope.expandAllRows = function() {
83-
$scope.gridApi.expandable.expandAllRows();
84-
}
84+
vm.expandAllRows = function() {
85+
vm.gridApi.expandable.expandAllRows();
86+
};
8587

86-
$scope.collapseAllRows = function() {
87-
$scope.gridApi.expandable.collapseAllRows();
88-
}
89-
}]);
88+
vm.collapseAllRows = function() {
89+
vm.gridApi.expandable.collapseAllRows();
90+
};
9091

91-
app.controller('SecondCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
92-
$scope.gridOptions = {
93-
enableRowSelection: true,
94-
expandableRowTemplate: 'expandableRowTemplate.html',
95-
expandableRowHeight: 150
96-
}
92+
vm.toggleExpandAllBtn = function() {
93+
vm.gridOptions.showExpandAllButton = !vm.gridOptions.showExpandAllButton;
94+
};
95+
});
9796

98-
$scope.gridOptions.columnDefs = [
99-
{ name: 'id', pinnedLeft:true },
100-
{ name: 'name'},
101-
{ name: 'age'},
102-
{ name: 'address.city'}
103-
];
104-
105-
$http.get('/data/500_complex.json')
106-
.then(function(response) {
107-
var data = response.data;
108-
109-
for(i = 0; i < data.length; i++){
110-
data[i].subGridOptions = {
111-
columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
112-
data: data[i].friends
113-
}
114-
}
115-
$scope.gridOptions.data = data;
116-
});
117-
}]);
118-
119-
app.controller('ThirdCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
120-
$scope.gridOptions = {
121-
expandableRowTemplate: 'expandableRowTemplate.html',
122-
expandableRowHeight: 150,
123-
onRegisterApi: function (gridApi) {
124-
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
125-
if (row.isExpanded) {
126-
row.entity.subGridOptions = {
127-
columnDefs: [
128-
{ name: 'name'},
129-
{ name: 'gender'},
130-
{ name: 'company'}
131-
]};
132-
133-
$http.get('/data/100.json')
134-
.then(function(response) {
135-
row.entity.subGridOptions.data = response.data;
136-
});
137-
}
138-
});
139-
}
140-
}
97+
app.controller('SecondCtrl', function SecondCtrl($http, $log) {
98+
var vm = this;
14199

142-
$scope.gridOptions.columnDefs = [
143-
{ name: 'id', pinnedLeft:true },
144-
{ name: 'name'},
145-
{ name: 'age'},
146-
{ name: 'address.city'}
147-
];
148-
149-
$http.get('/data/500_complex.json')
150-
.then(function(response) {
151-
$scope.gridOptions.data = response.data;
152-
});
153-
}]);
154-
app.controller('FourthCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
155-
$scope.gridOptions = {
156-
enableRowSelection: true,
157-
expandableRowTemplate: 'expandableRowTemplate.html',
158-
expandableRowHeight: 150
159-
}
100+
vm.gridOptions = {
101+
enableRowSelection: true,
102+
expandableRowTemplate: 'expandableRowTemplate.html',
103+
expandableRowHeight: 150
104+
}
105+
106+
vm.gridOptions.columnDefs = [
107+
{ name: 'id', pinnedLeft:true },
108+
{ name: 'name'},
109+
{ name: 'age'},
110+
{ name: 'address.city'}
111+
];
112+
113+
$http.get('/data/500_complex.json')
114+
.then(function(response) {
115+
var data = response.data;
116+
117+
for(i = 0; i < data.length; i++) {
118+
data[i].subGridOptions = {
119+
columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
120+
data: data[i].friends
121+
};
122+
}
123+
vm.gridOptions.data = data;
124+
});
125+
});
126+
127+
app.controller('ThirdCtrl', function ThirdCtrl($scope, $http, $log) {
128+
var vm = this;
129+
130+
vm.gridOptions = {
131+
expandableRowTemplate: 'expandableRowTemplate.html',
132+
expandableRowHeight: 150,
133+
onRegisterApi: function (gridApi) {
134+
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
135+
if (row.isExpanded) {
136+
row.entity.subGridOptions = {
137+
columnDefs: [
138+
{ name: 'name'},
139+
{ name: 'gender'},
140+
{ name: 'company'}
141+
]};
160142

161-
$scope.gridOptions.columnDefs = [
162-
{ name: 'id', pinnedLeft:true },
163-
{ name: 'name'},
164-
{ name: 'age'},
165-
{ name: 'address.city'}
166-
];
167-
168-
$http.get('/data/500_complex.json')
169-
.then(function(response) {
170-
var data = response.data;
171-
172-
for(i = 0; i < data.length; i++){
173-
data[i].subGridOptions = {
174-
columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
175-
data: data[i].friends,
176-
disableRowExpandable : (i % 2 === 0)
177-
}
178-
}
179-
$scope.gridOptions.data = data;
180-
});
181-
}]);
143+
$http.get('/data/100.json')
144+
.then(function(response) {
145+
row.entity.subGridOptions.data = response.data;
146+
});
147+
}
148+
});
149+
}
150+
};
151+
152+
vm.gridOptions.columnDefs = [
153+
{ name: 'id', pinnedLeft:true },
154+
{ name: 'name'},
155+
{ name: 'age'},
156+
{ name: 'address.city'}
157+
];
158+
159+
$http.get('/data/500_complex.json')
160+
.then(function(response) {
161+
vm.gridOptions.data = response.data;
162+
});
163+
});
164+
165+
app.controller('FourthCtrl', function FourthCtrl($http, $log) {
166+
var vm = this;
167+
168+
vm.gridOptions = {
169+
enableRowSelection: true,
170+
expandableRowTemplate: 'expandableRowTemplate.html',
171+
expandableRowHeight: 150
172+
};
173+
174+
vm.gridOptions.columnDefs = [
175+
{ name: 'id', pinnedLeft:true },
176+
{ name: 'name'},
177+
{ name: 'age'},
178+
{ name: 'address.city'}
179+
];
180+
181+
$http.get('/data/500_complex.json')
182+
.then(function(response) {
183+
var data = response.data;
184+
185+
for(i = 0; i < data.length; i++) {
186+
data[i].subGridOptions = {
187+
columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
188+
data: data[i].friends,
189+
disableRowExpandable : (i % 2 === 0)
190+
};
191+
}
192+
vm.gridOptions.data = data;
193+
});
194+
});
182195
</file>
183196
<file name="index.html">
184-
<div ng-controller="MainCtrl">
197+
<div ng-controller="MainCtrl as main">
185198
<div class="control-group">
186-
<input type="button" class="btn btn-small" ng-click="expandAllRows()" value="Expand All"/>
187-
<input type="button" class="btn btn-small" ng-click="collapseAllRows()" value="Collapse All"/>
199+
<button id="toggleVisibility" type="button" class="btn btn-sm btn-default" ng-click="main.toggleExpandAllBtn()">Toggle Expand All Visibility</button>
200+
<button type="button" class="btn btn-sm btn-default" ng-click="main.expandAllRows()">Expand All</button>
201+
<button type="button" class="btn btn-sm btn-default" ng-click="main.collapseAllRows()">Collapse All</button>
188202
</div>
189-
<div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
203+
<div id="grid1" ui-grid="main.gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
190204
</div>
191205
Expandable rows works with checkboxes from selection and left pins
192-
<div ng-controller="SecondCtrl">
193-
<div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable ui-grid-selection class="grid"></div>
206+
<div ng-controller="SecondCtrl as second">
207+
<div ui-grid="second.gridOptions" ui-grid-pinning ui-grid-expandable ui-grid-selection class="grid"></div>
194208
</div>
195209
Retrieve data for subGrid when expanding
196-
<div ng-controller="ThirdCtrl">
197-
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
210+
<div ng-controller="ThirdCtrl as third">
211+
<div ui-grid="third.gridOptions" ui-grid-expandable class="grid"></div>
198212
</div>
199213
Toggle expand subGrid control
200-
<div ng-controller="FourthCtrl">
201-
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
214+
<div ng-controller="FourthCtrl as fourth">
215+
<div ui-grid="fourth.gridOptions" ui-grid-expandable class="grid"></div>
202216
</div>
203217
</file>
204218
<file name="main.css">
@@ -210,4 +224,33 @@ appears when you quickly scroll through the grid.
210224
<file name="expandableRowTemplate.html">
211225
<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>
212226
</file>
227+
<file name="scenario.js">
228+
var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js'),
229+
GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'),
230+
grid1 = new GridObjectTest('grid1');
231+
232+
describe('216 Expandable Grid', function() {
233+
// Reload the page before each test if on Firefox. Chrome does it automatically.
234+
gridTestUtils.firefoxReload();
235+
236+
it('should load the header values should be as expected', function() {
237+
grid1.expectHeaderColumns(['Id', 'Name', 'Age', 'Address.City']);
238+
});
239+
240+
describe('Toggle Expand All Visibility', function() {
241+
var expandAllButton, emptyCellContent;
242+
243+
it('should display the expand all button by default', function() {
244+
expandAllButton = element( by.css('#grid1 .ui-grid-expandable-buttons-cell .ui-grid-icon-button') );
245+
expect(expandAllButton.isDisplayed()).toBe(true);
246+
});
247+
it('should hide the expand all button when the Toggle Expand All Visibility button is clicked', function() {
248+
element( by.id('toggleVisibility') ).click();
249+
250+
emptyCellContent = element( by.css('#grid1 .ui-grid-expandable-buttons-cell .ui-grid-cell-empty') );
251+
expect(emptyCellContent.isDisplayed()).toBe(true);
252+
});
253+
});
254+
});
255+
</file>
213256
</example>

‎src/features/expandable/js/expandable.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,21 @@
4545
*/
4646
grid.options.enableExpandable = grid.options.enableExpandable !== false;
4747

48+
/**
49+
* @ngdoc object
50+
* @name showExpandAllButton
51+
* @propertyOf ui.grid.expandable.api:GridOptions
52+
* @description Whether or not to display the expand all button, allows you to hide expand all button on specific grids
53+
* within your application, or in specific modes on _this_ grid. Defaults to true.
54+
* @example
55+
* <pre>
56+
* $scope.gridOptions = {
57+
* showExpandAllButton: false
58+
* }
59+
* </pre>
60+
*/
61+
grid.options.showExpandAllButton = grid.options.showExpandAllButton !== false;
62+
4863
/**
4964
* @ngdoc object
5065
* @name expandableRowHeight
@@ -62,7 +77,7 @@
6277

6378
/**
6479
* @ngdoc object
65-
* @name
80+
* @name expandableRowHeaderWidth
6681
* @propertyOf ui.grid.expandable.api:GridOptions
6782
* @description Width in pixels of the expandable column. Defaults to 40
6883
* @example

‎src/features/expandable/templates/expandableTopRowHeader.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<div
2-
class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
3-
<div
4-
class="ui-grid-cell-contents">
5-
<i
1+
<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
2+
<div class="ui-grid-cell-contents">
3+
<span class="ui-grid-cell-empty" ng-if="!grid.options.showExpandAllButton"></span>
4+
<button type="button" class="ui-grid-icon-button"
5+
ng-if="grid.options.showExpandAllButton"
66
ng-class="{ 'ui-grid-icon-plus-squared' : !grid.expandable.expandedAll, 'ui-grid-icon-minus-squared' : grid.expandable.expandedAll }"
77
ng-click="grid.api.expandable.toggleAllRows()">
8-
</i>
8+
</button>
99
</div>
1010
</div>

0 commit comments

Comments
 (0)