forked from dojo/dojo1-dgrid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSelection.html
133 lines (130 loc) · 5.49 KB
/
Selection.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Selection</title>
<meta name="viewport" content="width=570">
<style>
@import "../../dojo/resources/dojo.css";
@import "../css/skins/nihilo.css";
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
.dgrid {
width: 70%;
}
.ui-widget {
margin: 10px;
}
</style>
<script src="../../dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dojo/_base/lang", "dojo/_base/declare", "dojo/_base/array", "dojo/json", "dojo/on",
"dgrid/OnDemandGrid", "dgrid/editor","dgrid/Selection", "dgrid/CellSelection", "dgrid/Keyboard",
"dgrid/test/data/base", "dojo/domReady!"],
function(lang, declare, arrayUtil, json, on, Grid, editor, Selection, CellSelection, Keyboard, testStore){
on(document.body, "dgrid-select,dgrid-deselect",
function(event){
var msg = (event.type == "dgrid-deselect" ? "de" : "") + "selected";
console.log(event.grid.id + ": " + msg +
(event.parentType ? " (via " + event.parentType + "): " : ": "),
(event.cells ?
arrayUtil.map(event.cells, function(cell){
return cell.row.id + ":" + cell.column.id;
}).join(", ") :
arrayUtil.map(event.rows, function(row){ return row.id; }).join(", "))
);
console.log("selection: " + json.stringify(event.grid.selection, null, " "));
}
);
var SelectionGrid = declare([Grid, Selection, Keyboard]);
var CellSelectionGrid = declare([Grid, CellSelection, Keyboard]);
gridRowNavigation = new SelectionGrid({
store: testStore,
cellNavigation: false,
columns: {
col1: 'Column 1',
col2: {label: 'Column 2', sortable: false},
col3: 'Column 3',
col4: editor({label: 'Editable'}, "text")
},
allowSelectAll: true
}, "grid-row-navigation");
var columns2 = {
col1: 'Column 1',
col2: {label: 'Column 2', sortable: false},
col3: 'Column 3',
col4: 'Column 4'
};
gridCellNavigation = new CellSelectionGrid({
store: testStore,
columns: lang.clone(columns2)
}, "grid-cell-navigation");
gridCellNavigationSingle = new CellSelectionGrid({
store: testStore,
columns: lang.clone(columns2),
selectionMode: "single"
}, "grid-cell-navigation-single");
gridCellNavigationMultiple = new CellSelectionGrid({
store: testStore,
columns: lang.clone(columns2),
selectionMode: "multiple"
}, "grid-cell-navigation-multiple");
gridCellNavigationNone = new CellSelectionGrid({
store: testStore,
columns: lang.clone(columns2),
selectionMode: "none",
allowSelectAll: true
}, "grid-cell-navigation-none");
// cell navigation + row selection
gridMixed = new SelectionGrid({
store: testStore,
columns: { // same as columns in very first grid
col1: 'Column 1',
col2: {label: 'Column 2', sortable: false},
col3: 'Column 3',
col4: editor({label: 'Editable'}, "text")
}
}, "grid-mixed");
});
</script>
</head>
<body class="nihilo">
<h2>A grid with row-level selection (and row-level navigation)</h2>
<h3>Use Ctrl/Cmd+A to test keyboard select-all with different selectionModes</h3>
<div>Set selectionMode:
<button type="button" onclick="gridRowNavigation.set('selectionMode', 'none');">None</button>
<button type="button" onclick="gridRowNavigation.set('selectionMode', 'single');">Single</button>
<button type="button" onclick="gridRowNavigation.set('selectionMode', 'multiple');">Multiple</button>
<button type="button" onclick="gridRowNavigation.set('selectionMode', 'extended');">Extended</button>
<button type="button" onclick="gridRowNavigation.set('selectionMode', 'toggle');">Toggle</button>
</div>
<div>Set allowTextSelection:
<button type="button" onclick="gridRowNavigation.set('allowTextSelection', true);">Always allow</button>
<button type="button" onclick="gridRowNavigation.set('allowTextSelection', false);">Always prevent</button>
<button type="button" onclick="gridRowNavigation.set('allowTextSelection', undefined);">Default</button>
(default = allowed only when selectionMode == none)
</div>
<div id="grid-row-navigation"></div>
<h2>A grid with cell-level selection (default selection mode of "extended")</h2>
<div id="grid-cell-navigation"></div>
<h2>A grid with cell-level selection and selection mode of "single"</h2>
<div id="grid-cell-navigation-single"></div>
<h2>A grid with cell-level selection and selection mode of "multiple"</h2>
<div id="grid-cell-navigation-multiple"></div>
<h2>A grid with cell-level selection and selection mode of "none" initially</h2>
<h3>Use Ctrl/Cmd+A to test keyboard select-all with different selectionModes</h3>
<div>Set selectionMode:
<button type="button" onclick="gridCellNavigationNone.set('selectionMode', 'none');">None</button>
<button type="button" onclick="gridCellNavigationNone.set('selectionMode', 'single');">Single</button>
<button type="button" onclick="gridCellNavigationNone.set('selectionMode', 'multiple');">Multiple</button>
<button type="button" onclick="gridCellNavigationNone.set('selectionMode', 'extended');">Extended</button>
<button type="button" onclick="gridCellNavigationNone.set('selectionMode', 'toggle');">Toggle</button>
</div>
<div id="grid-cell-navigation-none"></div>
<h2>A grid with row-level selection and cell-level navigation</h2>
<div id="grid-mixed"></div>
</body>
</html>