<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Grid Common Cases</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../css/skins/claro.css";
|
h2 {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
clear: both;
|
}
|
#grid {
|
width: 70%;
|
}
|
#grid .field-col1 {
|
width: 100px;
|
}
|
#grid .field-col2 {
|
width: 30%;
|
}
|
#grid .field-col4 {
|
width: 180px;
|
}
|
|
#scrollgrid {
|
width: 50%;
|
}
|
#scrollgrid .dgrid-cell {
|
width: 100px; /* force all columns to have SOME width */
|
}
|
#scrollgrid .field-col1 {
|
width: 500px;
|
}
|
#scrollgrid .field-col4 {
|
width: 300px;
|
}
|
|
#tree {
|
width: 700px;
|
height: 200px;
|
float:left;
|
}
|
#tree .field-bool {
|
width: 20%;
|
}
|
#tree .field-type {
|
width: 80px;
|
}
|
#list{
|
width: 300px;
|
float: left;
|
}
|
.dgrid {
|
margin: 10px;
|
}
|
</style>
|
<script>
|
var start= new Date().getTime();
|
</script>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require([
|
"dojo/on",
|
"dgrid/List",
|
"dgrid/OnDemandGrid",
|
"dgrid/Tree",
|
"dgrid/Editor",
|
"dgrid/Selection",
|
"dgrid/Keyboard",
|
"dgrid/test/data/createSyncStore",
|
"dgrid/test/data/genericData",
|
"dgrid/test/data/createHierarchicalStore",
|
"dgrid/test/data/hierarchicalCountryData",
|
"dojo/_base/declare",
|
"dojo/_base/array",
|
"dojo/domReady!"
|
], function(on, List, Grid, Tree, Editor, Selection, Keyboard, createSyncStore, genericData, createHierarchicalStore, hierarchicalCountryData, declare, arrayUtil){
|
console.log("loaded in " + (new Date().getTime() - start));
|
|
var StandardGrid = declare([Grid, Selection, Keyboard, Editor, Tree]),
|
store = createSyncStore({ data: genericData }),
|
countryStore = createHierarchicalStore({ data: hierarchicalCountryData });
|
|
function getColumns(){
|
return { // you can declare columns as an object hash (key translates to field)
|
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"}
|
};
|
}
|
window.grid = new StandardGrid({
|
collection: store,
|
columns: getColumns()
|
}, "grid");
|
|
window.scrollgrid = new StandardGrid({
|
collection: store,
|
columns: getColumns()
|
}, "scrollgrid");
|
|
window.tree = new StandardGrid({
|
tabIndex: 2,
|
collection: countryStore,
|
selectionMode: "single",
|
columns: {
|
name: {label:'Name', sortable: false, renderExpando: true},
|
bool: {label: 'A CheckBox', sortable: false, editor: "checkbox"},
|
type: {label: 'Type', sortable: false},
|
population: 'Population',
|
timezone: 'Timezone'
|
}
|
}, "tree");
|
window.list = new (declare([List, Selection, Keyboard]))({
|
tabIndex: 1
|
}, "list");
|
list.renderArray(arrayUtil.map(hierarchicalCountryData.items, function(country){
|
return country.name;
|
}));
|
on(document.getElementById("save"), "click", function(){
|
grid.save();
|
});
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid (70% of page width)</h2>
|
<div id="grid"></div>
|
<button id="save">Save</button>
|
<h2>A grid with tree column and then a simple list (floated left)</h2>
|
<div id="tree"></div>
|
<div id="list"></div>
|
<h2>Same as basic grid, but with column widths exceeding grid width</h2>
|
<p>(for testing that nodes occupy correct widths - pay attention to hover/selection style)</p>
|
<div id="scrollgrid"></div>
|
</body>
|
</html>
|
