<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
|
<head>
|
<meta charset="utf-8">
|
<title>Test Right-To-Left</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";
|
|
h2 {
|
margin: 12px;
|
}
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
|
/* also not part of theme, but a contrived example of using dgrid-sortable. */
|
.dgrid-sortable {
|
font-weight: bold;
|
}
|
|
/* add styles to size this grid appropriately */
|
.dgrid {
|
height: 20em;
|
margin: 2em;
|
}
|
|
#scrollgrid {
|
width: 700px;
|
zoom: 1;
|
}
|
#scrollgrid .dgrid-cell {
|
width: 100px; /* force all columns to have SOME width */
|
}
|
#scrollgrid .field-col1 {
|
width: 500px;
|
}
|
#scrollgrid .field-col4 {
|
width: 300px;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
|
require(["dgrid/Grid", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/Keyboard",
|
"dgrid/Tree", "dgrid/Editor", "dojo/_base/lang",
|
"dojo/_base/declare", "dojo/on", "dojo/data/ObjectStore",
|
"dojo/store/Memory", "dojo/store/Observable",
|
"dgrid/test/data/createSyncStore", "dgrid/test/data/createHierarchicalStore",
|
"dgrid/test/data/testStore", "dgrid/test/data/stateData", "dgrid/test/data/typesData",
|
"dgrid/test/data/hierarchicalCountryData",
|
"dijit/form/CheckBox", "dijit/form/TimeTextBox",
|
"dijit/form/Select", "dijit/form/FilteringSelect",
|
"dgrid/extensions/Pagination", "dojo/domReady!"],
|
function(
|
Grid, OnDemandGrid, Selection, Keyboard, Tree, Editor, lang, declare, on, ObjectStore,
|
LegacyMemory, LegacyObservable, createSyncStore, createHierarchicalStore,
|
testStore, stateData, typesData, hierarchicalCountryData,
|
CheckBox, TimeTextBox, Select,
|
FilteringSelect, Pagination
|
){
|
var columns = [
|
{label: 'Column 1', field: 'col1'},
|
{label: 'Column 2', field: 'col2', sortable: false},
|
{label: 'Column 3', field: 'col3'},
|
{label: 'Column 4', field: 'col4'},
|
{label: 'Column 5', field: 'col5'}
|
];
|
var StandardGrid = declare([OnDemandGrid, Selection, Keyboard, Editor, Tree]);
|
|
window.grid = new StandardGrid({
|
collection: testStore,
|
columns: lang.clone(columns)
|
}, "grid");
|
|
window.scrollgrid = new StandardGrid({
|
collection: testStore,
|
columns: lang.clone(columns)
|
}, "scrollgrid");
|
|
window.tree = new StandardGrid({
|
className: "dgrid-autoheight",
|
collection: createHierarchicalStore({ data: hierarchicalCountryData }, true),
|
columns: [
|
{label: ' ', field: 'bool', sortable: false, editor: "checkbox"},
|
{label:'Name', field:'name', sortable: false, renderExpando: true},
|
{label:'Type', field:'type', sortable: false},
|
{label:'Population', field:'population'},
|
{label:'Timezone', field:'timezone'}
|
]
|
}, "tree");
|
|
window.headerless = new StandardGrid({
|
collection: testStore,
|
columns: {
|
col1: {label: 'Column 1 column 1 column 1', editor: "text", editOn: "dblclick"},
|
col2: {label: 'Column 2', sortable: false},
|
col3: {label: 'Column 3', editor: "text", editOn: "dblclick"},
|
col4: 'Column444444444444444444',
|
col5: {label: 'Column 5', editor: "text", editOn: "dblclick"}
|
},
|
showHeader: false
|
|
}, "headerless");
|
|
stateStore = new ObjectStore({
|
objectStore: LegacyObservable(new LegacyMemory({ data: lang.clone(stateData) })),
|
labelProperty: "name"
|
});
|
|
window.moreeditors = new StandardGrid({
|
collection: createSyncStore({ data: typesData }),
|
columns: [
|
{field: "id", label: "id"},
|
{
|
label: "CheckBox",
|
field: "bool2",
|
editor: CheckBox,
|
editorArgs: {
|
value: "checked"
|
}
|
},
|
{
|
label: "Time",
|
field: "date2",
|
editor: TimeTextBox,
|
editorArgs: {
|
timePattern: "HH:mm:ss",
|
clickableIncrement: "T00:15:00",
|
visibleIncrement: "T00:15:00",
|
visibleRange: "T01:00:00"
|
}
|
},
|
{
|
label: "Select Options",
|
field: "bool",
|
get: function(item){
|
// return as string to match option in list
|
return "" + item.bool;
|
},
|
set: function(item){
|
// convert back to boolean from string
|
return item.bool == "true";
|
},
|
editor: Select,
|
editOn: "dblclick",
|
editorArgs: {
|
style: "width:75px;",
|
options: [
|
{value: "true", label: "true"},
|
{value: "false", label: "false"}
|
]
|
}
|
},
|
{
|
label: "Select Store",
|
field: "state",
|
editor: Select,
|
editOn: "click",
|
editorArgs: {
|
store: stateStore,
|
maxHeight: 150,
|
style: "width:120px;"
|
}
|
},
|
{
|
label: "FilteringSelect Store",
|
field: "state2",
|
editor: FilteringSelect,
|
editorArgs: {
|
store: stateStore,
|
maxHeight: 150,
|
style: "width:120px;"
|
}
|
}
|
],
|
selectionMode: "none"
|
}, "moreeditors");
|
|
window.paginationGrid = new declare([Grid, Selection, Keyboard, Pagination])({
|
collection: testStore,
|
columns: lang.clone(columns)
|
}, "pagination");
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid</h2>
|
<div id="grid"></div>
|
|
<h2>Same as basic grid, but with column widths exceeding grid width</h2>
|
<p>(for testing horizontal scrolling)</p>
|
<div id="scrollgrid"></div>
|
|
<h2>Lazy-loading tree grid with auto-height</h2>
|
<div id="tree"></div>
|
|
<h2>Headerless grid</h2>
|
<div id="headerless"></div>
|
|
<h2>Grid with editors</h2>
|
<div id="moreeditors"></div>
|
<button type="button" id="save" onclick="moreeditors.save()">Save</button>
|
|
<h2>A grid with Pagination</h2>
|
<div id="pagination"></div>
|
</body>
|
</html>
|
