<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Selector mixin</title>
|
|
<link rel="stylesheet" href="../../../css/dgrid.css">
|
|
<style>
|
.dgrid {
|
height: 12em;
|
margin-bottom: 3em;
|
}
|
|
.dgrid .field-select {
|
width: 3em;
|
}
|
|
.dgrid .field-col1,
|
.dgrid .field-col2,
|
.dgrid .field-col5 {
|
width: 8em;
|
}
|
|
.gridContainer {
|
vertical-align: top;
|
width: 500px;
|
}
|
</style>
|
</head>
|
|
<body class="claro">
|
<table>
|
<tr>
|
<td class="gridContainer">
|
<h3>Extended selectionMode</h3>
|
<div id="gridExtended"></div>
|
|
<h3>Multiple selectionMode</h3>
|
<div id="gridMultiple"></div>
|
|
<h3>Single selectionMode</h3>
|
<div id="gridSingle"></div>
|
</td>
|
|
<td class="gridContainer">
|
<h3>Toggle selectionMode</h3>
|
<div id="gridToggle"></div>
|
|
<h3>None selectionMode</h3>
|
<div id="gridNone"></div>
|
</td>
|
</tr>
|
</table>
|
|
<script src="../../../../dojo/dojo.js"></script>
|
<script>
|
var gridExtended;
|
var gridMultiple;
|
var gridSingle;
|
var gridToggle;
|
var gridNone;
|
var ready;
|
|
require([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dgrid/OnDemandGrid',
|
'dgrid/Selection',
|
'dgrid/Selector',
|
'dgrid/test/data/testStore'
|
], function (declare, lang, OnDemandGrid, Selection, Selector, testStore) {
|
var SelectionGrid = declare([OnDemandGrid, Selection, Selector]);
|
|
function allowSelect(row) {
|
return !row.id || row.id % 2 === 0;
|
}
|
|
function createGrid(selectionMode) {
|
var id = 'grid' + selectionMode.slice(0, 1).toUpperCase() + selectionMode.slice(1);
|
var selectColumn = { label: 'Select', selector: 'checkbox' };
|
if (selectionMode === 'single') {
|
selectColumn.selector = 'radio';
|
}
|
|
return new SelectionGrid({
|
collection: testStore,
|
columns: {
|
select: selectColumn,
|
col1: 'Column 1',
|
col2: 'Column 2',
|
col5: 'Column 5'
|
},
|
selectionMode: selectionMode,
|
allowSelect: allowSelect,
|
allowSelectAll: selectionMode !== 'single'
|
}, id);
|
}
|
|
gridExtended = createGrid('extended');
|
gridMultiple = createGrid('multiple');
|
gridSingle = createGrid('single');
|
gridToggle = createGrid('toggle');
|
gridNone = createGrid('none');
|
|
ready = true;
|
});
|
</script>
|
</body>
|
</html>
|
