<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Tree Grid</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../css/skins/claro.css";
|
.dgrid {
|
width: 700px;
|
margin: 10px;
|
}
|
|
.field-bool {
|
width: 4em;
|
}
|
|
#treeGrid .field-type {
|
width: 5em;
|
}
|
|
#treeSelector .selector {
|
width: 2em;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require(["dojo/on", "dgrid/OnDemandGrid","dgrid/Tree","dgrid/Editor", "dgrid/Keyboard",
|
"dgrid/Selection", "dgrid/Selector", "dgrid/ColumnSet", "dojo/_base/declare",
|
"dgrid/test/data/createHierarchicalStore", "dgrid/test/data/hierarchicalCountryData",
|
"dgrid/test/data/testTopHeavyHierarchicalStore", "dojo/domReady!"],
|
function(
|
on, Grid, Tree, Editor, Keyboard, Selection, Selector, ColumnSet, declare,
|
createHierarchicalStore, hierarchicalCountryData, testTopHeavyHierarchicalStore
|
){
|
var count = 0; // for incrementing edits from button under 1st grid
|
|
function byId(id){
|
return document.getElementById(id);
|
}
|
|
function nbspFormatter(value){
|
// returns " " for blank content, to prevent cell collapsing
|
return value === undefined || value === "" ? " " : value;
|
}
|
|
var StandardGrid = declare([Grid, Keyboard, Selection, Selector, Editor, Tree]);
|
var testCountryStore = createHierarchicalStore({ data: hierarchicalCountryData }, true);
|
|
var treeGrid = window.treeGrid = new StandardGrid({
|
collection: testCountryStore,
|
columns: [
|
{renderExpando: true, label: "Name", field:"name", sortable: false},
|
{label: "Visited", field: "bool", sortable: false, editor: "checkbox"},
|
{label:"Type", field:"type", sortable: false},
|
{label:"Population", field:"population"},
|
{label:"Timezone", field:"timezone"}
|
]
|
}, "treeGrid");
|
|
on(byId("filter"), "click", function(){
|
var collection = testCountryStore.root.filter({ name: /a$/ });
|
collection.root = collection;
|
treeGrid.set("collection", collection.getRootCollection());
|
});
|
on(byId("clearFilter"), "click", function(){
|
treeGrid.set("collection", testCountryStore);
|
});
|
|
on(byId("save"), "click", function(){
|
treeGrid.save();
|
});
|
on(byId("revert"), "click", function(){
|
treeGrid.revert();
|
});
|
on(byId("add-country"), "click", function(){
|
testCountryStore.put({ id: 'GR', name:'Greece', type:'country', parent: 'EU'});
|
});
|
on(byId("remove-country"), "click", function(){
|
testCountryStore.remove('GR');
|
});
|
on(byId("add-continent"), "click", function(){
|
testCountryStore.put({ id: 'NE', name:'My New Europe', type:'continent'});
|
testCountryStore.put({ id: 'NI', name:'My New Italy', type:'country', parent: 'NE'});
|
});
|
on(byId("delete"), "click", function(){
|
for(var id in treeGrid.selection){
|
console.log("id: ", id);
|
testCountryStore.remove(id);
|
}
|
});
|
on(byId("edit-continent"), "click", function(){
|
var item = testCountryStore.getSync("EU");
|
item.name = "Europe Edit " + (++count);
|
testCountryStore.put(item);
|
});
|
on(byId("move-rome-na"), "click", function(){
|
var item = testCountryStore.getSync("Rome");
|
item.parent = "NA";
|
testCountryStore.put(item);
|
});
|
|
function getTreeSelectorColumns(){
|
return [
|
{selector: 'checkbox', className: "selector"},
|
{
|
renderExpando: true,
|
label: "Name",
|
field: "name",
|
formatter: function(value){
|
return "<strong>" + value + "</strong>";
|
},
|
sortable: false
|
},
|
{label: "Visited", field: "bool", sortable: false, editor: "checkbox"},
|
{label:"Type", field:"type", sortable: false},
|
{label:"Population", field:"population"},
|
{label:"Timezone", field:"timezone"}
|
];
|
}
|
|
window.treeSelector = new StandardGrid({
|
collection: testCountryStore,
|
selectionMode: "none",
|
allowSelectAll: true,
|
columns: getTreeSelectorColumns()
|
}, "treeSelector");
|
|
// Test resetting column definition on this grid, since it exercises
|
// one of each type of OOTB column plugin.
|
on(byId("resetColumns"), "click", function(){
|
treeSelector.set("columns", getTreeSelectorColumns());
|
});
|
|
window.treeTopHeavy = new StandardGrid({
|
collection: testTopHeavyHierarchicalStore,
|
columns: {
|
abbreviation: { renderExpando: true, label: "Abbreviation", field: "abbreviation" },
|
name: "Name"
|
}
|
}, "treeTopHeavy");
|
|
window.treeSubRows = new StandardGrid({
|
collection: testCountryStore,
|
subRows: [[
|
{renderExpando: true, label:"Name", field:"name", sortable: false},
|
{label:"Type", field:"type", sortable: false}
|
], [
|
{label:"Population", field:"population"},
|
{label:"Timezone", field:"timezone"}
|
]]
|
}, "treeSubRows");
|
|
window.treeColumnSets = new (declare([Grid, Keyboard, Selection, ColumnSet, Tree]))({
|
collection: testCountryStore,
|
columnSets: [[
|
[ {renderExpando: true, label:"Name", field:"name", sortable: false} ],
|
[ {label:"Type", field:"type", sortable: false} ]
|
], [
|
[
|
{label:"Population", field:"population", formatter:nbspFormatter},
|
{label:"Timezone", field:"timezone", formatter:nbspFormatter}
|
], [
|
{label:"Area", field:"area", colSpan:2, formatter:nbspFormatter}
|
]
|
]]
|
}, "treeColumnSets");
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>Lazy-loading tree grid, with store functionality</h2>
|
<div id="treeGrid"></div>
|
<div>
|
<button id="filter">Show only entries ending in "a"</button>
|
<button id="clearFilter">Show all</button>
|
</div>
|
<div>
|
<button id="save">Save</button>
|
<button id="revert">Revert</button>
|
<button id="add-continent">Add Continent</button>
|
<button id="add-country">Add Greece To Europe</button>
|
<button id="remove-country">Remove Greece</button>
|
<button id="delete">Delete Selected</button>
|
<button id="edit-continent">Edit Europe</button>
|
<button id="move-rome-na">Move Rome to North America</button>
|
</div>
|
|
<h2>Tree grid with formatter on tree column, and a checkbox selector to test select-all on children</h2>
|
<div id="treeSelector"></div>
|
<button id="resetColumns">Reset Columns</button>
|
<h2>Tree grid with more parents than children</h2>
|
<div id="treeTopHeavy"></div>
|
<h2>Tree grid with subRows</h2>
|
<div id="treeSubRows"></div>
|
<h2>Tree grid with columnSets</h2>
|
<div id="treeColumnSets"></div>
|
</body>
|
</html>
|
