This is driving me crazy. The tree is not displaying at all.
Here is the code
<html>
<head>
<meta charset="utf-8">
<title>The CheckBox Tree with multi-parented Eventable Store</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="dojo/dojo/dojo.js"></script>
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" type="text/css"/>
<link rel="stylesheet" href="cbtree/themes/claro/claro.css" type="text/css"/>
<script> dojoConfig = {async: true, parseOnLoad: true};</script>
<script>
var myData = [
{ name:"Family" , type:"root" },
{ name:"Abe" , type:"parent", parent:["root"] , hair:"Brown" },
{ name:"Jacqueline", type:"parent", parent:["root"] , hair:"Brown" },
{ name:"Homer" , type:"parent", parent:["Abe"] , hair:"none" },
{ name:"Marge" , type:"parent", parent:["Jacqueline"] , hair:"blue" },
{ name:"Bart" , type:"child" , parent:["Homer","Marge"], hair:"blond" },
{ name:"Lisa" , type:"child" , parent:["Homer","Marge"], hair:"blond" },
{ name:"Maggie" , type:"child" , parent:["Homer","Marge"], hair:"blond" }
];
required(["cbtree/store/Hierarchy",
"cbtree/model/TreeStoreModel",
"cbtree/Tree",
"dojo/dojo/ready"
], function (Hierarchy, TreeStoreModel, Tree) {
// Create the store and load it with our data set.
var myStore = new Hierarchy( { data:myData } );
var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
var myTree = new Tree( { model:myModel }, "CheckBoxTree" );
myTree.startup();
});
</script>
</head>
<body class="claro">
<h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
<div id="CheckBoxTree" style="width:300px; height:300px; border-style:solid; border-width:medium;">
</div>
</body>
</html>
Anyone have any clue? The imports are all fine.
I have the folders in the root like this:
dojo/dojo
dojo/dijit
cbtree/
Thanks
You're requireing dojo/dojo/ready, but you're not using it. I think you need to either wrap your tree creation in ready(function(){...}) or use the dojo/domReady! plugin to wait for the dom to be ready before you interact with it. Note the use of require as opposed to required and the inclusion of ready in the require callback in the first example.
dojo/ready
require(["cbtree/store/Hierarchy",
"cbtree/model/TreeStoreModel",
"cbtree/Tree",
"dojo/dojo/ready"
], function (Hierarchy, TreeStoreModel, Tree, ready) {
ready(function() {
// Create the store and load it with our data set.
var myStore = new Hierarchy( { data:myData } );
var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
var myTree = new Tree( { model:myModel }, "CheckBoxTree" );
myTree.startup();
}
});
dojo/domReady!
require(["cbtree/store/Hierarchy",
"cbtree/model/TreeStoreModel",
"cbtree/Tree",
"dojo/dojo/domReady!"
], function (Hierarchy, TreeStoreModel, Tree) {
// Create the store and load it with our data set.
var myStore = new Hierarchy( { data:myData } );
var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
var myTree = new Tree( { model:myModel }, "CheckBoxTree" );
myTree.startup();
});
Try this one (tested on dojo 1.10):
require(["dojo/_base/connect", "dijit/dijit", "dojo/data/ItemFileReadStore", "dijit/Tree", "dijit/form/CheckBox",
"dojo/domReady!"],
function (connect, dijit, ItemFileReadStore, Tree, CheckBox) {
var store = new ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeControl = new Tree({
store: store,
showRoot: false,
_createTreeNode: function (args) {
var tnode = new Tree._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
var cb = new CheckBox();
cb.placeAt(tnode.labelNode, "first");
connect.connect(cb, "onChange", function () {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
connect.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode.item
}]);
});
return tnode;
}
}, "CheckboxTree");
connect.subscribe("/checkbox/clicked", function (message) {
console.log("you clicked:", store.getLabel(message.item));
});
}); // require
var rawdata = [{
label: 'Level 1',
id: '1',
children: [{
label: 'Level 1.1',
id: '1.1',
active: true
},
{
label: 'Level 1.2',
id: '1.2',
active: true
}]
},
{
label: 'Level 2',
id: '2',
children: [{
id: '2.1',
label: 'Level 2.1',
active: false
},
{
id: '2.2',
label: 'Level 2.2',
active: true
},
{
id: '2.3',
label: 'Level 2.3',
active: true
}]
}];
http://jsfiddle.net/mcfskLop/
