Skip to content

Commit

Permalink
feat(expandAllButton): Add ability to hide expand all button.
Browse files Browse the repository at this point in the history 
fix #6555
  • Loading branch information
@mportuga
Portugal, Marcelo authored and mportuga committed Feb 3, 2018
1 parent 835153c commit 343d711
Show file tree
Hide file tree
Showing 6 changed files with 468 additions and 183 deletions.
271 changes: 157 additions & 114 deletions misc/tutorial/216_expandable_grid.ngdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,19 @@ appears when you quickly scroll through the grid.
<file name="app.js">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
app.controller('MainCtrl', function MainCtrl($http, $log) {
var vm = this;

vm.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150,
//subGridVariable will be available in subGrid scope
expandableRowScope: {
subGridVariable: 'subGridScopeVariable'
}
}
};

$scope.gridOptions.columnDefs = [
vm.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age'},
Expand All @@ -68,137 +70,149 @@ appears when you quickly scroll through the grid.

for(i = 0; i < data.length; i++){
data[i].subGridOptions = {
columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
data: data[i].friends
}
};
}
$scope.gridOptions.data = data;
vm.gridOptions.data = data;
});

$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
vm.gridOptions.onRegisterApi = function(gridApi){
vm.gridApi = gridApi;
};

$scope.expandAllRows = function() {
$scope.gridApi.expandable.expandAllRows();
}
vm.expandAllRows = function() {
vm.gridApi.expandable.expandAllRows();
};

$scope.collapseAllRows = function() {
$scope.gridApi.expandable.collapseAllRows();
}
}]);
vm.collapseAllRows = function() {
vm.gridApi.expandable.collapseAllRows();
};

app.controller('SecondCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
enableRowSelection: true,
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150
}
vm.toggleExpandAllBtn = function() {
vm.gridOptions.showExpandAllButton = !vm.gridOptions.showExpandAllButton;
};
});

$scope.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];

$http.get('/data/500_complex.json')
.then(function(response) {
var data = response.data;

for(i = 0; i < data.length; i++){
data[i].subGridOptions = {
columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
data: data[i].friends
}
}
$scope.gridOptions.data = data;
});
}]);

app.controller('ThirdCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150,
onRegisterApi: function (gridApi) {
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
columnDefs: [
{ name: 'name'},
{ name: 'gender'},
{ name: 'company'}
]};

$http.get('/data/100.json')
.then(function(response) {
row.entity.subGridOptions.data = response.data;
});
}
});
}
}
app.controller('SecondCtrl', function SecondCtrl($http, $log) {
var vm = this;

$scope.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];

$http.get('/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
app.controller('FourthCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
enableRowSelection: true,
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150
}
vm.gridOptions = {
enableRowSelection: true,
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150
}

vm.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];

$http.get('/data/500_complex.json')
.then(function(response) {
var data = response.data;

for(i = 0; i < data.length; i++) {
data[i].subGridOptions = {
columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
data: data[i].friends
};
}
vm.gridOptions.data = data;
});
});

app.controller('ThirdCtrl', function ThirdCtrl($scope, $http, $log) {
var vm = this;

vm.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150,
onRegisterApi: function (gridApi) {
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
columnDefs: [
{ name: 'name'},
{ name: 'gender'},
{ name: 'company'}
]};

$scope.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];

$http.get('/data/500_complex.json')
.then(function(response) {
var data = response.data;

for(i = 0; i < data.length; i++){
data[i].subGridOptions = {
columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
data: data[i].friends,
disableRowExpandable : (i % 2 === 0)
}
}
$scope.gridOptions.data = data;
});
}]);
$http.get('/data/100.json')
.then(function(response) {
row.entity.subGridOptions.data = response.data;
});
}
});
}
};

vm.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];

$http.get('/data/500_complex.json')
.then(function(response) {
vm.gridOptions.data = response.data;
});
});

app.controller('FourthCtrl', function FourthCtrl($http, $log) {
var vm = this;

vm.gridOptions = {
enableRowSelection: true,
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150
};

vm.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];

$http.get('/data/500_complex.json')
.then(function(response) {
var data = response.data;

for(i = 0; i < data.length; i++) {
data[i].subGridOptions = {
columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
data: data[i].friends,
disableRowExpandable : (i % 2 === 0)
};
}
vm.gridOptions.data = data;
});
});
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<div ng-controller="MainCtrl as main">
<div class="control-group">
<input type="button" class="btn btn-small" ng-click="expandAllRows()" value="Expand All"/>
<input type="button" class="btn btn-small" ng-click="collapseAllRows()" value="Collapse All"/>
<button id="toggleVisibility" type="button" class="btn btn-sm btn-default" ng-click="main.toggleExpandAllBtn()">Toggle Expand All Visibility</button>
<button type="button" class="btn btn-sm btn-default" ng-click="main.expandAllRows()">Expand All</button>
<button type="button" class="btn btn-sm btn-default" ng-click="main.collapseAllRows()">Collapse All</button>
</div>
<div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
<div id="grid1" ui-grid="main.gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
</div>
Expandable rows works with checkboxes from selection and left pins
<div ng-controller="SecondCtrl">
<div ui-grid="gridOptions" ui-grid-pinning ui-grid-expandable ui-grid-selection class="grid"></div>
<div ng-controller="SecondCtrl as second">
<div ui-grid="second.gridOptions" ui-grid-pinning ui-grid-expandable ui-grid-selection class="grid"></div>
</div>
Retrieve data for subGrid when expanding
<div ng-controller="ThirdCtrl">
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
<div ng-controller="ThirdCtrl as third">
<div ui-grid="third.gridOptions" ui-grid-expandable class="grid"></div>
</div>
Toggle expand subGrid control
<div ng-controller="FourthCtrl">
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
<div ng-controller="FourthCtrl as fourth">
<div ui-grid="fourth.gridOptions" ui-grid-expandable class="grid"></div>
</div>
</file>
<file name="main.css">
Expand All @@ -210,4 +224,33 @@ appears when you quickly scroll through the grid.
<file name="expandableRowTemplate.html">
<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>
</file>
<file name="scenario.js">
var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js'),
GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'),
grid1 = new GridObjectTest('grid1');

describe('216 Expandable Grid', function() {
// Reload the page before each test if on Firefox. Chrome does it automatically.
gridTestUtils.firefoxReload();

it('should load the header values should be as expected', function() {
grid1.expectHeaderColumns(['Id', 'Name', 'Age', 'Address.City']);
});

describe('Toggle Expand All Visibility', function() {
var expandAllButton, emptyCellContent;

it('should display the expand all button by default', function() {
expandAllButton = element( by.css('#grid1 .ui-grid-expandable-buttons-cell .ui-grid-icon-button') );
expect(expandAllButton.isDisplayed()).toBe(true);
});
it('should hide the expand all button when the Toggle Expand All Visibility button is clicked', function() {
element( by.id('toggleVisibility') ).click();

emptyCellContent = element( by.css('#grid1 .ui-grid-expandable-buttons-cell .ui-grid-cell-empty') );
expect(emptyCellContent.isDisplayed()).toBe(true);
});
});
});
</file>
</example>
17 changes: 16 additions & 1 deletion src/features/expandable/js/expandable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,21 @@
*/
grid.options.enableExpandable = grid.options.enableExpandable !== false;

/**
* @ngdoc object
* @name showExpandAllButton
* @propertyOf ui.grid.expandable.api:GridOptions
* @description Whether or not to display the expand all button, allows you to hide expand all button on specific grids
* within your application, or in specific modes on _this_ grid. Defaults to true.
* @example
* <pre>
* $scope.gridOptions = {
* showExpandAllButton: false
* }
* </pre>
*/
grid.options.showExpandAllButton = grid.options.showExpandAllButton !== false;

/**
* @ngdoc object
* @name expandableRowHeight
Expand All @@ -62,7 +77,7 @@

/**
* @ngdoc object
* @name
* @name expandableRowHeaderWidth
* @propertyOf ui.grid.expandable.api:GridOptions
* @description Width in pixels of the expandable column. Defaults to 40
* @example
Expand Down
12 changes: 6 additions & 6 deletions src/features/expandable/templates/expandableTopRowHeader.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div
class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
<div
class="ui-grid-cell-contents">
<i
<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
<div class="ui-grid-cell-contents">
<span class="ui-grid-cell-empty" ng-if="!grid.options.showExpandAllButton"></span>
<button type="button" class="ui-grid-icon-button"
ng-if="grid.options.showExpandAllButton"
ng-class="{ 'ui-grid-icon-plus-squared' : !grid.expandable.expandedAll, 'ui-grid-icon-minus-squared' : grid.expandable.expandedAll }"
ng-click="grid.api.expandable.toggleAllRows()">
</i>
</button>
</div>
</div>
Loading

0 comments on commit 343d711

Please sign in to comment.