Home › Forums › General › JavaScript

DIJIT - TREE - expand

Sun, 09/02/2007 - 15:29 — dimi

Hi,
does anyone please know how to expand last accessed item in tree ? im using dijit 0.9
IE: i click one item, after reload, i know the item clicked (identifier). So i want to expland whole branch of tree where my clicked item is.
Somtehing like store.expand(); doesnt work :(


<?
if($this->currentNode){
echo 'var selectedNode='.$this->currentNode.';';
}
?>
var store = dijit.byId("maintree").store;
/*
if (selectedNode > 0){
store.fetchItemByIdentity({identity: selectedNode, onItem: onItem});
}
*/

Thanx

dynamic dijit tree ›
Fri, 08/01/2008 - 22:17 — agmdbilal@gmail.com

DIJIT - TREE - expand

if i used that example (DIJIT - TREE - expand) working fine. but i'll get duplicate entry. here is my example code
------
/dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true">

dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.dijit");
dojo.require("dijit.Tree");

@import "<%=serverPath%>/dojo/resources/dojo.css";
@import "<%=serverPath%>/dijit/themes/soria/soria.css";
@import "<%=serverPath%>/dijit/themes/tundra/tundra.css";

var data = {
"identifier":"nodeId",
"label":"name",
"items":[
{"name":"India", "type":"continent", "nodeId":"1","children":[{"_reference":"2"}]},
{"name":"Egypt","type":"country","nodeId":"2"},
{"name":"Pakistan", "type":"continent", "nodeId":"3"},
{"name":"Banga", "type":"continent", "nodeId":"4"},
{"name":"Australia", "type":"continent", "nodeId":"5"}
]
};
var popStore = new dojo.data.ItemFileWriteStore({data: data});
dojo.addOnLoad(function(){
dojo.subscribe("maintree", null, function(message) {
if(message.event == "execute") {
}
});
});

var children = this.getChildren();
alert(children);
for (var j = 0; j < children.length; j++) {
var child = children[j];
if ('' == child.item.name) {
dojo.publish(this.id, [dojo.mixin({tree: this, event: "toggleOpen"}, {node: child})]);
}
}

-------------------
i'll get the answer is
- India
Egypt
Egypt
India
Banga
Australia
----------here Egypt is duplicate entry how do i solve that. pls let me know

Tue, 09/04/2007 - 23:22 — Alex

DOJO Tree expand node example

Hi,

As I see there is no method you can use to expand the node, but you can publish the same event that is published by the dojo when the tree node is clicked. The code may be similar to:

<div dojoType="dijit.Tree" id="mytree" jsId="mytree" store="continentStore"
query="{type:'continent'}" labelAttr="name" typeAttr="type">
<script type="dojo/method" event="startup" args="e">
var children = this.getChildren();
for (var j = 0; j < children.length; j++) {
var child = children[j];
if (<?=$selectedNodeName ?> == child.item.name) {
dojo.publish(this.id, [dojo.mixin({tree: this, event: "toggleOpen"}, {node: child})]);
}
}
</script>
</div>

Sat, 09/08/2007 - 13:23 — dimi

Problem

Hi again,
sorry but i cant fugure it out.
property children (var children = this.getChildren();) is always empty. The tree is builded OK.
if i try function getItemChildren listed in http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-... i recieve error that there is no such function, just why :((
Please help, this is a key functionality to use the tree :(
Details above

HEADER

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.Tree");
dojo.require("dijit.ColorPalette");
dojo.require("dijit.Menu");

// form
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.FilteringSelect");

dojo.require("dojo.parser"); // scan page for widgets and instantiate them

dojo.addOnLoad(function(){
dojo.subscribe("maintree", null, function(message){
if(message.event=="execute"){
getNodeUrl(structure.getValue(message.item, "nodeId"));
}
});
});

TREE

">

var children = this.getChildren();
for (var j = 0; j < children.length; j++) {
var child = children[j];
<?= 'var selectedNode='.$this->currentNode.';' ?>
if (selectedNode == child.item.nodeId) {
dojo.publish(this.id, [dojo.mixin({tree: this, event: "toggleOpen"}, {node: child})]);
}
}

DATA

{"identifier":"nodeId","label":"name","items":[{"name":"test 3","type":"continent","nodeId":1,"children":[{"_reference":2}]},{"name":"Egypt","type":"country","nodeId":2}]}

Sun, 09/09/2007 - 17:06 — Alex

Please more information

I created a tree with information you provided as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tree Demo</title>
<script type="text/javascript" src="../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.dijit");
dojo.require("dijit.Tree");
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../themes/soria/soria.css";
</style>
<script type="text/javascript">
var data = {
"identifier":"nodeId",
"label":"name",
"items":[
{"name":"test 3", "type":"continent", "nodeId":1,"children":[{"_reference":2}]},
{"name":"Egypt","type":"country","nodeId":2}
]
};
var popStore = new dojo.data.ItemFileWriteStore({data: data});
dojo.addOnLoad(function(){
dojo.subscribe("maintree", null, function(message) {
if(message.event == "execute") {
}
});
});
</script>
</head>
<body class="tundra">
<div dojoType="dijit.Tree" id="maintree" store="popStore" labelAttr="name">
<script type="dojo/method" event="startup" args="e">
var children = this.getChildren();
alert(children);
for (var j = 0; j < children.length; j++) {
var child = children[j];
if ('' == child.item.name) {
dojo.publish(this.id, [dojo.mixin({tree: this, event: "toggleOpen"}, {node: child})]);
}
}
</script>
</div>
</body>
</html>

and "alert(children);" displays the root nodes of the tree. Please test it.

Sincerely,
Alex

Tue, 09/11/2007 - 10:21 — donkelito

my tree works but throw a error! any idea?

My tree, with your script, is now a autoexpanded tree, but throws a error...

--------------------
node has no properties
(no name)(Object duration=250)dojo.js (line 130)
(no name)([])dojo.js (line 455)
(no name)([dijit._TreeNode, Tester de dojo 0.9.0 con decorator] _connects=[0] _attaches=[0], [])dojo.js (line 412)
(no name)([dijit._TreeNode, Tester de dojo 0.9.0 con decorator] _connects=[0] _attaches=[0])dojo.js (line 374)
(no name)(Object tree=[dijit.Tree ID:tree1] event=toggleOpen)dojo.js (line 279)
(no name)(Object tree=[dijit.Tree ID:tree1] event=toggleOpen)dojo.js (line 65)
e()dojo.js (line 20)
e()dojo.js (line 20)
e("tree1", [Object tree=[dijit.Tree ID:tree1] event=toggleOpen])dojo.js (line 20)
isCollapsed()dijit.js (line 26)
isCollapsed([dijit.Tree ID:tree1] _connects=[2] _attaches=[0] id=tree1 store=Object)dijit.js (line 20)
e([[Widget dijit.layout.LayoutContainer, mainim] srcNodeRef=div#mainim.dijitContainer _connects=[1], [Widget dijit.layout.ContentPane, acontentpanetop] srcNodeRef=div#acontentpanetop.dijitContentPane, [Widget dijit.layout.ContentPane, bcontentpane] srcNodeRef=div#bcontentpane.dijitContentPane, 7 more...], function(), undefined)dojo.js (line 20)
isCollapsed([div#mainim.dijitContainer, div#acontentpanetop.dijitContentPane, div#bcontentpane.dijitContentPane, 7 more...])dijit.js (line 20)
isCollapsed(body#container.tundra)dijit.js (line 20)
(no name)()MainMenu.do (line 120)
e()dojo.js (line 20)
e()dojo.js (line 20)
e()dojo.js (line 20)
e(load )dojo.js (line 20)
[Break on this error] undefined
--------------------

any idea
thanks.!!! great job

Mon, 09/10/2007 - 19:01 — dimi

Still problem

Hi,
thank you, i know where is the problem now, it work when the structure is inside the document, but if i use sorage like

< d i v dojoType="dojo.data.ItemFileReadStore" jsId="popStore"
url="/data/tree/structure.json">
i cant acces the propery children, can i fix that somehow please ?

One more question, can i have more than 2 levels in the tree ?
This is not working :(

{
"identifier":"nodeId",
"label":"name",
"items":[
{"name":"test 3", "type":"continent", "nodeId":1,"children":[{"_reference":2}]},
{"name":"Egypt","type":"country","nodeId":2,"children":[{"_reference":3}]}
{"name":"Egypt2","type":"country","nodeId":3}
]
}

Thanks
Mike

Wed, 09/12/2007 - 14:42 — Alex

Solution on expanding tree nodes on startup using dijit.Tree

Hello,

I made a big investigation on this and you can read it here:
Expanding tree nodes on startup using dijit.Tree
In brief: there is no way to do it with dijit.Tree but we can extend it and add desired functionality.

Sincerely,
Alex

Thu, 09/13/2007 - 20:52 — dimi

Problems

im heaving problems with expanding tree if there are ie 5 levels, i hope ill fix it,
i cant delete my post so this is edit :)
i ll try to fix it on my own, ill give it a one more try before posting :)

Best
Mike

Thu, 09/13/2007 - 21:23 — dimi

Not working over 3 levels

Hi, so yes unfortunatelly there is problem,
i dont know why, the behavior described above is the same with your original example, when you add 2 more levels and try to expand them programaticaly.

Problem:
i made a little changes on code, but it doesnt matter i thing, the expanding works only for 3 levels, no more :(
i dont know why, any idea please ?
im just using nodeId form my identifikator, beause name is not unique, so i changed ( path = separator + node.item.nodeId + path; )

my expand script looks like this

getPath: function (node, separator) {
var path = separator;
do {
path = separator + node.item.nodeId + path;
node = node.getParent();
} while ('dijit._TreeNode' == node.declaredClass);
return path;
},

< d i v dojoType="dojo.data.ItemFileReadStore" jsId="structure"
url="/data/tree/structure.json?random=56377894">
< d i v dojoType="AdvancedTree" id="maintree" jsId="maintree"
store="structure" query="{type:'TREE'}"
labelAttr="name" typeAttr="type" path="/1/2/3/5/6">

and data:

{
"identifier":"nodeId",
"label":"name",
"items":[
{"name":"Rada pro","type":"TREE","nodeId":"1","children":[{"_reference":"2"}]},
{"name":"rte r","type":"ITEM","nodeId":"2","children":[{"_reference":"4"},{"_reference":"3"}]},
{"name":"aaa","type":"ITEM","nodeId":"4","children":[]},
{"name":"takcoje","type":"ITEM","nodeId":"3","children":[{"_reference":"5"}]},
{"name":"fadadfad","type":"ITEM","nodeId":"5","children":[{"_reference":"6"}]},
{"name":"rsqqq","type":"ITEM","nodeId":"6","children":[]}
]
}

Please help :(
Mike

Fri, 09/14/2007 - 20:18 — dimi

dojo

Whow thanx a lot Alex, i will newer figure it out on my own.
But stil problem :( see note higher :(

Best
Mike

Sat, 09/15/2007 - 13:27 — Alex

Mike, Article

Mike,

Article http://www.alexatnet.com/node/69 is updated.
Now works ok with more then 3 levels.

Sincerely,
Alex

Sun, 09/16/2007 - 11:44 — dimi

it works

Hello,
thank you :)
i m sure this will help a lot of people.

Mike