<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test declarative cell editors </title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../../dijit/themes/claro/claro.css";
|
@import "../css/skins/claro.css";
|
body {
|
padding: 0 80px; /* side padding to make it easier to scroll doc */
|
}
|
|
/* tests for renderCell / renderHeaderCell */
|
.renderedCell {
|
font-style: italic;
|
}
|
.renderedHeaderCell {
|
text-decoration: underline;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require(["dgrid/GridFromHtml", "dgrid/OnDemandList", "dgrid/Keyboard",
|
"dojo/store/Memory", "dojo/store/Observable",
|
"dojo/_base/declare", "dojo/parser",
|
"dijit/form/Select", "dgrid/Editor", "dijit/form/DateTextBox",
|
"dijit/form/HorizontalSlider", "dijit/form/NumberSpinner", "dojo/data/ObjectStore",
|
"dgrid/test/data/createSyncStore", "dgrid/test/data/typesData", "dgrid/test/data/stateData",
|
"dojo/domReady!"],
|
function(
|
GridFromHtml, OnDemandList, Keyboard, LegacyMemory, LegacyObservable, declare, parser,
|
Select, Editor, DateTextBox, Slider, NumberSpinner, ObjectStore,
|
createSyncStore, typesData, stateData
|
){
|
window.dgrid = {
|
GridFromHtml: declare([GridFromHtml, OnDemandList, Editor])
|
};
|
window.stateStore = new ObjectStore({
|
objectStore: LegacyObservable(new LegacyMemory({ data: stateData })),
|
labelProperty: "name"
|
});
|
// GridFromHtml tests
|
window.testTypesStore = createSyncStore({ data: typesData });
|
window.gridProgrammatic = new dgrid.GridFromHtml({
|
collection: testTypesStore
|
}, "gridProgrammatic");
|
parser.parse();
|
});
|
|
</script>
|
</head>
|
<body class="claro">
|
|
|
<!-- GridFromHtml should look for TRs with THs anywhere.
|
Testing here with one thead, one tbody, and one implicit. -->
|
|
<h2>1: GridFromHtml instantiated programmatically,
|
with columns using editor plugin</h2>
|
<table id="gridProgrammatic">
|
<thead>
|
<tr>
|
<th data-dgrid-column="{field:'date', editor: dijit.form.DateTextBox}">Date</th>
|
<th data-dgrid-column="{field: 'text', editor: 'text', editOn: 'dblclick'}">Text editable on dblclick</th>
|
<th data-dgrid-column="{
|
field: 'state',
|
editorArgs: {store: stateStore, style: 'width:120px;', maxHeight: -1},
|
editor: dijit.form.Select}">State</th>
|
<th data-dgrid-column="{field:'text2', sortable:false}">Uneditable</th>
|
</tr>
|
</thead>
|
</table>
|
<h2>2: Fully declarative GridFromHtml,
|
with columns using editor plugin</h2>
|
<table id="gridDeclarative" data-dojo-id="gridDeclarative"
|
data-dojo-type="dgrid.GridFromHtml" data-dojo-props="collection: testTypesStore">
|
<tr>
|
<th data-dgrid-column="{field:'date', editor: dijit.form.DateTextBox}">Date</th>
|
<th data-dgrid-column="{field: 'text', editor: 'text', editOn: 'dblclick'}">Text editable on dblclick</th>
|
<th data-dgrid-column="{
|
field: 'state',
|
editor: dijit.form.Select,
|
editorArgs: {store: stateStore, style: 'width:120px;', maxHeight: -1}
|
}">State</th>
|
<th data-dgrid-column="{field:'text2', sortable:false}">Uneditable</th>
|
</tr>
|
</table>
|
</body>
|
</html>
|
