<!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/dgrid.css";
|
@import "../css/skins/nihilo.css";
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
.dgrid {
|
width: 70%;
|
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/testStore", "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, Editor]);
|
var CellSelectionGrid = declare([Grid, CellSelection, Keyboard]);
|
|
gridRowNavigation = new SelectionGrid({
|
collection: testStore,
|
cellNavigation: false,
|
columns: {
|
col1: 'Column 1',
|
col2: {label: 'Column 2', sortable: false},
|
col3: 'Column 3',
|
col4: {label: 'Editable', editor: "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({
|
collection: testStore,
|
columns: lang.clone(columns2)
|
}, "grid-cell-navigation");
|
gridCellNavigationSingle = new CellSelectionGrid({
|
collection: testStore,
|
columns: lang.clone(columns2),
|
selectionMode: "single"
|
}, "grid-cell-navigation-single");
|
gridCellNavigationMultiple = new CellSelectionGrid({
|
collection: testStore,
|
columns: lang.clone(columns2),
|
selectionMode: "multiple"
|
}, "grid-cell-navigation-multiple");
|
gridCellNavigationNone = new CellSelectionGrid({
|
collection: testStore,
|
columns: lang.clone(columns2),
|
selectionMode: "none",
|
allowSelectAll: true
|
}, "grid-cell-navigation-none");
|
|
// cell navigation + row selection
|
gridMixed = new SelectionGrid({
|
collection: testStore,
|
columns: { // same as columns in very first grid
|
col1: 'Column 1',
|
col2: {label: 'Column 2', sortable: false},
|
col3: 'Column 3',
|
col4: {label: 'Editable', editor: "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>
|
