Monday, January 22, 2007

Introducing the Dojo Tree Widget

I've written an article on my site about the Dojo Tree Widget. Its a quick intro to building trees using the Dojo/HTML method and moves on to building a Tree widget pro grammatically.

Feel free to leave comments.


Links to this post


At 09 February, 2007 00:57, Blogger jagan said...

Hi Will,
Its really a good article ... which i need ...
and I have a doubt too how to display folder icons and to change dynamically on expand and me out ..

At 09 February, 2007 11:14, Blogger willCode4Beer said...

Great idea.
I've added a new page that I hope explains how to customize the icons.
Let me know if its useful

At 13 February, 2007 16:29, Blogger Rai said...

Great article. I have been struggling with how I might be able to add a hyperlink to a JSON hierachy dynamically. I am able to populate a tree using dynamically, but was interested in what the syntax was to specify a hyperlink.

At 15 February, 2007 23:10, Anonymous Anonymous said...

thanks for the awesome tutorial and demo. one question, how do i pass querystring parameters to the servlet?

At 15 April, 2007 12:50, Blogger Unknown said...

Thanks for your articles about dojo Tree Widget. As dojo is not (yet) well documented, it was very useful for me, especially the part about the connection to the server. I adapted it very easily to Ruby on rails. I also deeply appreciate your article about the javascript bubble tooltips for acronym tags. Thanks again for your great job and ... sorry for my weak English vocabulary.

At 21 April, 2007 16:28, Anonymous Anonymous said...

Well done, great article!!

I use TreeRpcControllerV3 to fetch and handle node moves and such. But when a node is moved I need to delete it's children and when I press the + sign to open the tree, it needs to fetch the new children again.

However for some reason the RPC is not called anymore for the request 'getChildren' any idea?


At 08 May, 2007 02:39, Anonymous Anonymous said...

hi, this article is extremely helpful to me.Thanks for the great work! I tried to override the treeController.onTitleClick (in a similar manner to treeController.onTreeClick). However that doesn't seem to fire when the tree node is clicked. Any idea why? Cheers :)


At 19 May, 2007 18:15, Anonymous Anonymous said...

Paul, thanks for this article. It's the best tutorial on dojo trees out there.

I found a problem in the sample code though and I think it's due to a bug in the Dojo registerChild() method. In your programmatic TreeNode creation you have both a addChild(node) and a registerChild(node, i). This is creating duplicate TreeNodes. Do an alert on treeParentNode.children after you run the for loop and you'll see everything doubled.

Besides making the Tree twice as large, it's also adding an unwanted left-side grid on the last element of the root-level grid. It should be blank, instead it's drawing a grid line to a non-existent next node. You can see this in your example if you click the last node on the root level.

I removed the registerChild line and everything worked normally. I also went into the dojo source and saw some notes that make me think they were working on a bug fix. So I'll report this to the dojo team too.

At 22 May, 2007 07:35, Blogger Unknown said...

Hi Paul,

Currently i am working with DOJO tree to build the hierarchy tree in browser. I am severly in need of some help. Please provide information for the following clarifications.
DOJO tree loading is very slow , I have tried some custom builds using the latest 4.3 version, but still i dont see much difference in the behavior.
I want to send the response from the server as an Object by putting in to the session rather then setting it in Response(Printwriter).Is it possible using struts Action class?

On clicking of any node i want to open different JSP based on the node type and node id, is that possible?
If you can provide the solution for these issues it will be really great.

Thanks and regards,

At 20 June, 2007 04:53, Anonymous Anonymous said...

Thanks for such a nice and well arranged article.
One of the best article read so far. Can you help me in creating my own namespace in DOJO?

At 03 September, 2007 13:41, Anonymous Anonymous said...

Hi will,

I am using your RPC tree sample, But i am not sure how to call different URL for each node seleceted..

# var myRpcController = dojo.widget.createWidget("TreeRPCController",{
# widgetId:"treeController",
# RPCUrl:"getChildren"
# });

My requirement is i need to call the RPCURL is = "getChildren?option="+node.title

where node.title is the node selected, depending upon that i need to check in the database what are the subnodes for that and send it back..

Thanking you in advance


At 18 November, 2007 19:13, Anonymous Anonymous said...

hi every one,
so, in the beginning, thanks a lot for this tutorial, it is really useful for beginners.
for RKN , if you need to add your personal params, you should change the RPCUrl every time you call the node, I mean that you change this param in the onTreeClick function to become like this :
myRpcController.onTreeClick = function(message){
var node = message.source;
RPCUrl = "servlet?nodeTitle="+node.title+"¶m2="+...
if (node.isExpanded){
} else {

so the RPCUrl is overriden every time a node is called to request the server, this is the logical way to parametrize your request because the treenode widget is not able to bind a raquest with the server.
in any way, I've found this youseful when we separate the controm widget and the treenode one.

At 28 December, 2007 14:35, Anonymous Anonymous said...

Hiya Paul et all (Wow, thats rhyming :-) ).....

As many have mentioned, this is indeed an excellent tutor for DOJO novices such as myself.... Thank you so much....

I had a req of building a tree in the web app that Ive been working on... I thought dojo would be the best approach as it provides rich event handling.... However, my application is JSF based and hence I dont want to call a servlet in the RPC URL and instead want a JSF backing bean method to be invoked.... Can I do this? If so, can you please let me know how? I have an idea of calling a js method and inturn making this method call a hidden command link on the page,.... but however, Im not pretty sure as of how I can call a method, while clicking on the "+" sign that preceeds each node....

FYI, Im using DOJO version 0.4 and I would want to upgrade to 0.9 due to some approval issues....

Thanks a lot in advance!!



At 28 December, 2007 16:13, Blogger willCode4Beer said...

Hi Arvind,
Since you are using JSF, I would recommend that you take a look at the jMaki project.

It integrates very well with JSF, and provides a nice abstraction (read cleaner API) to the Dojo Widgets. It can also allow you to swap out Dojo for other treee implementations without having to monkey with the code.


At 30 December, 2007 09:21, Anonymous Anonymous said...

Thanks a lot Paul....

Ive heard about jMaki in the past, but never thought of looking into it... I guess I'm left with no choice now than to look into Jmaki... (Lazy me :-) ) BTW, are you aware of any good site that provide the documentation on JMAKI and JSF intergration....



At 17 December, 2008 00:36, Anonymous Anonymous said...

First of all, thanks a lot for the useful code!

Any plans to upgrade the code now that Dojo 1.2.3 is out (as of December 16, 2008)?

I looked at their documentation and it didn't look like it would allow a custom build / RPC call methodology to build the list. It's give all data in one go in a compliant JSON and then you are done. That's too expensive for any intesive tree list.

At 06 January, 2009 17:58, Blogger willCode4Beer said...

Yes, I hope to upgrade these pages to cover the newer version of Dojo soon.

I just have to find some time to do it.

I'm glad it was useful for you.


At 24 October, 2009 04:41, Anonymous Anonymous said...

waste fellow i am not getting any thing

At 15 February, 2010 06:05, Blogger Unknown said...

can anyone tell please how to build a dynamic tree structure of all the files and folders within a directory using dojo.


Post a Comment

Subscribe to Post Comments [Atom]

<< Home

Links to this post on: