Thursday, May 15, 2008

The elusive Dojo Treetable

I just got a mail from David Silvestre, who asked me about how to go about building a Dojo Treetable. You know, the sortable table thingy where you can expand and collapse each level just like a tree, but it still retain all columns for everything it shows?
Anyway, I had do one of those last winter, for a project, and spent a large amount of time trying make Dojo's existing Grid and/or Tree usable to do what I wanted, and ultimately failed.

Here's my short notes on how (to the best of my recollectionary faculties) I did it;

I found a couple existing treetables, especially one for jQuery, but in the end I had to make one myself to understand what I was doing. I recommend you to do the same.


1) Create a simple custom widget (see my ultra-light tutorial here;
2) Create a table (remember to use , et.c. otherwise IE will barf :) in the template for it
3) You have a hierarchy of data (an xml document, no doubt).
4) Use dojox.xml.DomParser to get a traversable object (still horrible but hey) of the XML. (I have some examples on how to use it if you need)
5) Create an array of object trees out of the xml object. I mad an array indexed on 'name', where I created an 'artist' object and stuck it there, and under that I stuck and 'album', followed by 'song' object. You get the picture.
6) When the array is done, you parse it (could possible by done in one step, I guess) and create an image and a subtable, and add that to the single td of the overall table
7) I recurse the object tree for each array object, and create a new image and table, which gets tucked inside the single td of the parent table, until there are no more object levels.
8) I now have a table with a table in in with a table in it, et.c.
9) The image (+ or -) beside the table has an onclick handler which shows or hides the table it is handling. Thus you can get smooth animations and hide/show all or some things that you already have open, according to which level you click the image on.

Now that I've written it out, it does sound a bit harder than it felt, but the hard part is realy to parse the xml data and create a usable structure. After that it's (just) a recursive table making function. Sort of :)

Actually, I think I'll post this to my blog, since it's at least a rough sketch for someone else in your position.

Hmm.. Maybe this could be a real Dojo component. Maybe.. err.. in autumn :)



Nicola said...

Cheers, can you help me?
I need treeTable, but i don`t create this widget. Can you send me this widget or publish this.

P.s. Sorry, i learn English :)

Peter Svensson said...

@nicola: Sorry, the code I have is not very generic.

I have been meaning to create a version of it based on the Dojo DataGrid, but I have too many other projects going on at the moment.


Rashmi Khanna said...

I am using dojo and have a set of NumberTextBoxes inside a TreeTable grid. The value gets rounded off to 3 decimal places inspite of specifying places in constraints.The issue seems to be with the grid, not sure what would round off the value.

This is my inputbox declaration, I have tried specifying different constraints but as soon as I click on the NumberTextBox the value gets rounded off to 3 decimal places.
var inputbox = new dijit.form.NumberTextBox({
style : "width:80%;",
value : value,
//alt : "Rate Value",
//title : dojo.number.format(value, {places: '2,8'}),
role : "presentation",
//'aria-label' : inDatum,
'aria-hidden' : "false",
'aria-atomic' : "false",
constraints : {
value : 0.000000,
max : 1000000000,
places: 6,
pattern: '#.############'
inputbox.set('constraints', {min:0,max:10000000, places:6,pattern: '#.############'});

Peter Svensson said...

Hi Rashmi, wow this is a very old post of mine, before there were proper treetables in Dojo!

I have not worked with Dojo for a couple of years, however, so I'm not the right person to answer this, I'm afraid.

I get a feeling that the treetablegrid has some kind of default formatting for certain scenarios (to make sure things don't overflow, perhaps) that is biting you.

but to make sure, please post to the Dojo mailing-lists and see if someone can help you there. Also taking a look at the source-code sometimes can be a good idea. Not all of it is complicated. Worth a try.