/
210_selection.ngdoc
165 lines (135 loc) · 7.49 KB
/
210_selection.ngdoc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
@ngdoc overview
@name Tutorial: 210 Selection
@description
This grid example uses the ui-grid-selection directive to row selection. To enable, you must include the 'ui.grid.selection'
module and you must include the ui-grid-selection directive on your grid element.
Uses the gridOptions.onRegisterApi callback to register the rowSelectionChanged event and log when the row is selected.
By default the selection feature will divide selection changes into batch events and single events, there are
two different events provided in the api. By setting `enableSelectionBatchEvent: false` you can cause it to
instead just call the single event in a loop - which may be useful if you're doing client rather than server
side processing of the changes.
By default the module will provide a row header with checkboxes that allow selection of individual rows. If you set
the `enableRowHeaderSelection` gridOption to false, then the row header is hidden and a click on the row will
result in selection of that row. You can see that in this tutorial for grid1 by looking at your javascript console.
Setting the `multiSelect` gridOption to true will allow selecting multiple rows, setting to false will allow selection
of only one row at a time.
If you have `multiSelect: false`, then an additional option `noUnselect` will mean that a row is always selected. You
can select a different row (which will unselect the current row), but you cannot manually unselect the current row
by clicking on it. This means that at least one row is always selected, other than when you first open the grid. If
necessary you could programatically select the first row upon page open. The second grid demonstrates this.
If `multiSelect: true`, another option `modifierKeysToMultiSelect` may be used. If set to true this will allow selecting
multiple rows only if the Ctrl-Key, Cmd-Key (Mac) or the Shift-Key is used when selecting, if set to false then it allows
selecting multiple rows by individually clicking them.
By default a selectAll box is shown at the top of the rowHeader. If `multiSelect: true` is set then this will allow
you to select all visible rows. Note that the selectAll does not watch for new data, so if you are using the selectAll
function and you add data to the grid, you need to check `grid.api.selection.getSelectAllState`, and if it is currently
ticked, then manually call `grid.api.selection.selectAllVisibleRows` after your data has been added.
The selectAll box can be disabled by setting `enableSelectAll` to false.
You can set the selection row header column width by setting 'selectionRowHeaderWidth' option.
@example
Two examples are provided, the first with rowHeaderSelection and multi-select, the second without.
<example module="app">
<file name="app.js">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
enableRowSelection: true,
enableSelectAll: true,
selectionRowHeaderWidth: 35,
showGridFooter:true
};
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' }
];
$scope.gridOptions.multiSelect = true;
$http.get('/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
$scope.info = {};
$scope.toggleMultiSelect = function() {
$scope.gridApi.selection.setMultiSelect(!$scope.gridApi.grid.options.multiSelect);
};
$scope.toggleModifierKeysToMultiSelect = function() {
$scope.gridApi.selection.setModifierKeysToMultiSelect(!$scope.gridApi.grid.options.modifierKeysToMultiSelect);
};
$scope.selectAll = function() {
$scope.gridApi.selection.selectAllRows();
};
$scope.clearAll = function() {
$scope.gridApi.selection.clearSelectedRows();
};
$scope.toggleRow1 = function() {
$scope.gridApi.selection.toggleRowSelection($scope.gridOptions.data[0]);
};
$scope.gridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
var msg = 'row selected ' + row.isSelected;
$log.log(msg);
});
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
var msg = 'rows changed ' + rows.length;
$log.log(msg);
});
};
}]);
app.controller('SecondCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
$scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' }
];
$scope.gridOptions.multiSelect = false;
$scope.gridOptions.modifierKeysToMultiSelect = false;
$scope.gridOptions.noUnselect = true;
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
};
$scope.toggleRowSelection = function() {
$scope.gridApi.selection.clearSelectedRows();
$scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
$scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.OPTIONS);
};
$http.get('/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
// $interval whilst we wait for the grid to digest the data we just gave it
$interval( function() {$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);}, 0, 1);
});
}]);
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<button type="button" class="btn btn-success" ng-click="toggleMultiSelect()">Toggle multiSelect</button> <strong>MultiSelect:</strong> <span ng-bind="gridApi.grid.options.multiSelect"></span>
<button type="button" class="btn btn-success" ng-click="toggleRow1()">Toggle Row 0</button>
<br/>
<br/>
<button type="button" class="btn btn-success" ng-click="toggleModifierKeysToMultiSelect()">Toggle modifierKeysToMultiSelect</button> <strong>ModifierKeysToMultiSelect:</strong> <span ng-bind="gridApi.grid.options.modifierKeysToMultiSelect"> </span>
<br/>
<br/>
<button type="button" class="btn btn-success" ng-disabled="!gridApi.grid.options.multiSelect" ng-click="selectAll()">Select All</button>
<button type="button" class="btn btn-success" ng-click="clearAll()">Clear All</button>
<br/>
<div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
</div>
<div ng-controller="SecondCtrl">
Single selection grid without rowHeader, and allowing rowSelection to be toggled on and off dynamically:
<br/>
<button type="button" class="btn btn-success" ng-click="toggleRowSelection()">Toggle rowSelection</button> <strong>rowSelection:</strong> <span ng-bind="gridApi.grid.options.enableRowSelection"></span>
<div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
</div>
</file>
<file name="main.css">
.grid {
width: 100%;
height: 400px;
}
</file>
</example>