dijit.Tree Dynamic loading of nodes

Submitted by marmots on Mon, 02/04/2008 - 08:47.

Hi,

I'm trying to use dijit.Tree but letting it load children dynamically when user clicks on one expandable node.
In previous versions you can use a TreeController to load the sons, but now it's not possible to do this. I've tried and tried without any ressult. Also i've googled for examples and the only samples i've founded are with 0.4 version.

it's possible, without any code modification to write a dynamic tree?
I think that there are two keys to do this, first of all i need to tell the node that it is expandable (to show plus sign and let user click on this node to expad it): there is one method one the node isExpandable that i could rewrite to use a property in JSON array. The other key is the method getChildren that would have to make a request to the server to get clicked node sons. I'm going in the right way?

there's a easier method to do what i want?

Thanks in advice,

Login or register to post comments
Unsubscribe post

This is possible via a

Submitted by trutwijd on Mon, 02/11/2008 - 20:10.

This is possible via a QueryReadStore (in dojox) and connecting to the getItemChildren event. It's not too difficult but a little advanced - if you still need this I can try to post some code. Dojo 1.0.2 required.

Josh

posted code is good

Submitted by byersa on Mon, 02/11/2008 - 20:50.

I would love to get some example code. And I am sure anyone else coming along would appreciate it.

Thanks,
Al Byers

Requires dojo 1.0.2 (due to

Submitted by trutwijd on Wed, 02/13/2008 - 15:53.

Requires dojo 1.0.2 (due to dojox.QueryReadStore updates) and might be changed from recent post on dojo's blog: http://www.dojotoolkit.org/2008/02/12/dijit-tree-and-dojo-data-dojo-1-1

Here's a snippet of the JSON I'm using, the first item has no children, the second does:

{
label: 'name',
identifier: 'id',
items: [

{ id:'1', name:'item_id', type:'item'
},

{ id:'5', name:'assignments', type:'item', plugin_id:'101', children: [
{ id:'5_1', name:'fieldid', type:'sub'},
{ id:'5_2', name:'raw', type:'sub'},
{ id:'5_3', name:'optionid', type:'sub'},
{ id:'5_4', name:'value', type:'sub'}
]
},
...
]
}

When the expand node for the second item is pressed, the query will be run this time with ?plugin_id=101 at the end to get that item's child nodes.

Hope that helps,

Josh

undefined items

Submitted by dgodsey on Wed, 02/20/2008 - 02:09.

All the labels of the items is "undefined" for some reason. My tree looks like:
-Item
undefined
undefined
+undefined

Html/javascript is as follows

        dojo.provide("custom.TreeQueryReadStore");
        dojo.declare("custom.TreeQueryReadStore", dojox.data.QueryReadStore, {
                fetch: function(request) {
                        console.log('fetching plugin: ' + request.plugin_id);
                        request.serverQuery = {plugin_id: request.plugin_id};

                        // Call superclasses' fetch
                        return this.inherited("fetch", arguments);
                }
        });





        
                if (parentItem == null) {
                        // get top level nodes for this plugin id
                        treeStore.fetch({ plugin_id: 1, onComplete: onComplete});
                }
                else{
                        treeStore.fetch({ plugin_id: treeStore.getValue(parentItem, 'plugin_id'), onComplete: onComplete});
                }

Here is the json response (captured from firebug):

{ label: 'name',
                       identifier: 'name',
                       items: [
                         {plugin_id: 3, name:'Fruit', type:'category'},
                         { plugin_id:4, name:'Cinammon', type: 'category'},
                         { plugin_id:5, name:'Chocolate', type: 'category',children: [
                                                        { name:'kiss', type:'sub'},
                                                        { name:'heart', type:'sub'},
                                                        { name:'bunny', type:'sub'},
                                                        { name:'slug', type:'sub'}
                                               ]}
                        ]
                    }

Any idea why I would be getting "undefined" labels with this code?

Thanks.
Dave

Your JSON doesn't have any

Submitted by trutwijd on Wed, 02/20/2008 - 21:46.

Your JSON doesn't have any items where the plugin_id equals 1, which is what you are asking for with this first fetch:

treeStore.fetch({ plugin_id: 1, onComplete: onComplete});

doesn't appear to be the probelem

Submitted by dgodsey on Thu, 02/21/2008 - 15:24.

I didn't worry about exactly what plugin_id's were being returned, it is just a static print statement in a php file that return s this no matter the plugin_id requested (just for testing). When I return one that includes plugin_id: 1, there is no change .... still "undefined" labels for all tree nodes.

{ label: 'name',
                       identifier: 'name',
                       items: [
                         {plugin_id: 1, name:'Fruit', type:'category'},
                         { plugin_id:4, name:'Cinammon', type: 'category'},
                         { plugin_id:5, name:'Chocolate', type: 'category',children: [
                                                        { name:'kiss', type:'sub'},
                                                        { name:'heart', type:'sub'},
                                                        { name:'bunny', type:'sub'},
                                                        { name:'slug', type:'sub'}
                                                ]}
                        ]
                    }

Thanks for the suggestion. Any other ideas?

Dave

As a side note

Submitted by dgodsey on Thu, 02/21/2008 - 15:30.

For some testing I defined an ItemFileReadStore and used that in the construction of a tree (using a slightly different method) and it printed the labels as expected. I then changed it to this QueryReadStore, and again "undefined" even though it was the same json being used.

Dave

Strange, I'm not sure what's

Submitted by trutwijd on Fri, 02/22/2008 - 15:16.

Strange, I'm not sure what's going on. You are using dojo 1.0.2 right?

Sure am

Submitted by dgodsey on Fri, 02/22/2008 - 20:01.

Yeah, I'm using dojo 1.0.2. I just switched to ItemFileReadStore, and it works perfectly. For some reason the QueryReadStore gives me "undefined" labels.

I did find something interesting in this post:

http://dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/reload...

QueryReadStore isn't quite ready to be used with tree... Adding getLabel allows you to get at least the node labels - see QueryReadStore: getLabel (from FileItemReadStore). However, the real issue is that the store lacks functions for handling references and tree-like data.

But as shown, you obviously have it working.

Anyway, doesn't matter much now. I discovered that the data set for the tree will never be too big, and if it grows it will be very slow, so the ItemFileReadStore is a better way of doing it (I return it from a MySQL database with a little php script).

Thanks.

Dave