Skip to content

Instantly share code, notes, and snippets.

/treeGrid.html

Created December 4, 2016 19:20
Download ZIP
20161204mpt dojox.TreeGrid test shell w/layout (working tree grid)
Raw
treeGrid.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta description='20161204mpt dojox.TreeGrid test shell w/layout (working tree grid)'>
<title>Demo: Layout with StackContainer</title>
<link rel="stylesheet" href="https://dojotoolkit.org/documentation/tutorials/1.10/_common/demo.css" media="screen">
<link rel="stylesheet" href="https://dojotoolkit.org/documentation/tutorials/1.10/dijit_layout/demo/style.css" media="screen">
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" media="screen" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://demos.dojotoolkit.org/demos/grid/demo.css">
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1">
</script>
<script>
require(["dojo/parser", "dojo/on", "dijit/registry", "dojo/dom",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/StackContainer", "dijit/layout/StackController",
"dijit/Dialog", "dijit/form/DropDownButton", "dijit/TooltipDialog",
"dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button",
"dojo/dom-form", "dojo/domReady!"],
function(parser, on, registry, dom, Dialog, domForm){
var domTestBtn = dom.byId("btn2");
var regTestBtn = registry.byId("btn2");
var strLogp = "";
var mAdminMode = false;
mAdminChk = function(){
if(!mAdminMode){
mADlg.show();
};
}
parser.parse();
});
</script>
<script type="text/javascript">
require([
"dojox/grid/TreeGrid", "dijit/tree/ForestStoreModel",
"dojo/data/ItemFileWriteStore", "dijit/form/Button",
"dojo/parser"
], function(TreeGrid, ForestStoreMode, ItemFileWriteStore, parser){
var dataItems = {
identifier: 'id',
label: 'name',
items: [
{ id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
timezone: '-1 UTC to +4 UTC',
children:[{_reference:'EG'}, {_reference:'KE'}, {_reference:'SD'}] },
{ id: 'EG', name:'Egypt', type:'country' },
{ id: 'KE', name:'Kenya', type:'country',
children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] },
{ id: 'Nairobi', name:'Nairobi', type:'city' },
{ id: 'Mombasa', name:'Mombasa', type:'city' },
{ id: 'SD', name:'Sudan', type:'country',
children:{_reference:'Khartoum'} },
{ id: 'Khartoum', name:'Khartoum', type:'city' },
{ id: 'AS', name:'Asia', type:'continent',
children:[{_reference:'CN'}, {_reference:'IN'}, {_reference:'RU'}, {_reference:'MN'}] },
{ id: 'CN', name:'China', type:'country' },
{ id: 'IN', name:'India', type:'country' },
{ id: 'RU', name:'Russia', type:'country' },
{ id: 'MN', name:'Mongolia', type:'country' },
{ id: 'OC', name:'Oceania', type:'continent', population:'21 million',
children:{_reference:'AU'}},
{ id: 'AU', name:'Australia', type:'country', population:'21 million'},
{ id: 'EU', name:'Europe', type:'continent',
children:[{_reference:'DE'}, {_reference:'FR'}, {_reference:'ES'}, {_reference:'IT'}] },
{ id: 'DE', name:'Germany', type:'country' },
{ id: 'FR', name:'France', type:'country' },
{ id: 'ES', name:'Spain', type:'country' },
{ id: 'IT', name:'Italy', type:'country' },
{ id: 'NA', name:'North America', type:'continent',
children:[{_reference:'MX'}, {_reference:'CA'}, {_reference:'US'}] },
{ id: 'MX', name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km',
children:[{_reference:'Mexico City'}, {_reference:'Guadalajara'}] },
{ id: 'Mexico City', name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'},
{ id: 'Guadalajara', name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' },
{ id: 'CA', name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km',
children:[{_reference:'Ottawa'}, {_reference:'Toronto'}] },
{ id: 'Ottawa', name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'},
{ id: 'Toronto', name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' },
{ id: 'US', name:'United States of America', type:'country' },
{ id: 'SA', name:'South America', type:'continent',
children:[{_reference:'BR'}, {_reference:'AR'}] },
{ id: 'BR', name:'Brazil', type:'country', population:'186 million' },
{ id: 'AR', name:'Argentina', type:'country', population:'40 million' }
]};
var dataItems2 = dojo.clone(dataItems);
function add_item(child, parentId){
if(child){
jsonStore.fetchItemByIdentity({
identity: parentId,
onItem: function(item){
if(item){
continentModel.newItem(child, item);
}
}
});
}
}
dojo.addOnLoad(function(){
var layout = [
{ name: "Name", field: "name", width: "auto" },
{ name: "Population", field: "population", width: "auto" },
{ name: "Timezone", field: "timezone", width: "auto" }
];
var jsonStore2 = new dojo.data.ItemFileWriteStore({ data: dataItems2 });
var treeModel2 = new dijit.tree.ForestStoreModel({
store: jsonStore2,
query: { type: 'continent' },
rootId: 'continentRoot',
rootLabel: 'Continents',
childrenAttrs: ['children']
});
var grid2 = new dojox.grid.TreeGrid({
treeModel: treeModel2,
structure: layout,
defaultOpen: true
}, 'programmatic_grid');
grid2.startup();
dojo.connect(window, "onresize", grid2, "resize");
});
});
</script>
</head>
<body class="claro">
<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'">
<div class="centerPanel" data-dojo-type="dijit/layout/StackContainer" data-dojo-props="region: 'center',id: 'contentStack'">
<div data-dojo-type="dijit/layout/ContentPane" title="Group 1">
<h4>Group 1 Content</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<br>
<div id="programmatic_grid"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Group Two">
<h4>Group 2 Content</h4>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Long Tab Label for this One">
<h4>Group 3 Content</h4>
</div>
</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
<div data-dojo-type="dijit/layout/StackController" data-dojo-props="containerId:'contentStack'"></div>
</div>
<div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true">
Sidebar content (left)
<div id="leftAccordian" data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;">
<div id="leftAccPane1" data-dojo-id="leftAccPane1" data-dojo-type="dijit/layout/ContentPane" title="Group 1">
<h4>Group 1 Content</h4>
<button data-dojo-id="btn1" data-dojo-type="dijit/form/Button" onClick="alert('test');">Alert!</button>
<br>
<button data-dojo-id="btn2" data-dojo-type="dijit/form/Button">Alert2</button>
</div>
<div id="leftAccPane2" data-dojo-type="dijit/layout/ContentPane" onShow="mAdminChk();" title="Group Two">
<h4>Group 2 Content</h4>
</div>
<div id="leftAccPane3" data-dojo-type="dijit/layout/ContentPane" title="Long Tab Label for this One">
<h4>Group 3 Content</h4>
</div>
</div>
</div>
</div>
<!-- div mADlg -->
<section>
<div data-dojo-id="mADlg" data-dojo-type="dijit/Dialog" title="Check">
<div data-dojo-type="dijit/form/DropDownButton">
<span>Admin mode</span>
<div data-dojo-type="dijit/form/Form" id="myAdminForm" data-dojo-id="myAdminForm">
<div data-dojo-type="dijit/TooltipDialog" id="tooltipDlg">
<table>
<tr>
<td><label for="Adminpwd">Password:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" required="true" type="password" id="Adminpwd" name="Adminpwd"></td>
</tr>
<tr>
<td colspan="2">
<button data-dojo-type="dijit/form/Button" type="submit" name="submit">Login</button></td>
</tr>
</table>
</div>
<script type="dojo/on" data-dojo-event="submit">
if(this.validate()){
mSetAdminMode();
};
return false;
</script>
<script>
require(["dojo/dom-form", "dojo/dom", "dojo/on", "dojo/parser",
"dijit/form/Form", "dijit/form/Button",
"dojo/domReady!"],
function(domForm, dom, on){
mSetAdminMode = function(value, constraints){
var pw = domForm.fieldToObject("Adminpwd");
var tmpVar = window.atob("dGVzdGluZw==");
var date = new Date();
var myRe = new RegExp(tmpVar, "g");
if(myRe.test(pw)){
mAdminMode = true;
mADlg.hide();
alert('Form contains valid data.');
return true;
}else{
alert('Form contains invalid data. Please correct first');
return false;
}
}
});
</script>
</div>
</div>
<div id="mAlertTxt" data-dojo-props="style: {overflow: 'auto', padding: 0, height:'80%', width:'80%'}" data-dojo-type="dijit/layout/ContentPane">
</div>
</div></section>
<!-- div mADlg -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment