View source for Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.Tree

__NOTOC__
==dijit.Tree==
This article show how to implement a dijit.Tree.

==Dijit.Tree populated from a relational database==
This tree is populated from a relational database where the children refer to the parents. 
(The normal example is where the parents hold a list of children).

The getChildren function is overwritten with a custom function. First the root is loaded (all top level items) then the children is loaded.
In this implementation the server is only asked on time to get the file.
Use the Firefox bugtrace to see how the children is loaded.  

<syntaxhighlight lang="JavaScript">
<script>
    dojo.ready(function(){
    
      var store = new dojo.data.ItemFileWriteStore({
          url: "data/ProjectList.php"
      });
  
      var treeModel = new dijit.tree.ForestStoreModel({ //ForestStoreModel
          store: store,
          query: {"main": "0"}, // Call all parents (Not used: Implemented in getChildren)
          rootId: "project",
          rootLabel: "Projects",
          
          mayHaveChildren : function(item) {
    	       return true;
          },
        
       var getChildren: function(parentItem, callback, onError) {
              if( parentItem.root == true ){
                 console.debug("Root onLoad here!");
                 if(this.root.children){
	                    console.debug("--already loaded, just return!");
	                    callback(this.root.children);
	               }else{
	                   this.store.fetch({
	                        query: this.query, // Call all parents
	                        queryOptions: {cache:false},
	                        onComplete: dojo.hitch(this, function(items){
	                            this.root.children = items;
	                            callback(items);
	                        }),
	                        onError: onError
	                    });
                 }
              } else {
                 console.debug("Tree child onLoad here: "+parentItem.id);
                 //console.debug(toString(parentItem.id);
                     var sx = parseInt(parentItem.id);
	                   this.store.fetch({
	                        query: { main: sx }, //Find all children based on parentItem.id parentItem.id
	                        queryOptions: {cache:false},
	                        onComplete: dojo.hitch(this, function(items){
	                            this.root.children = items;
	                            callback(items);
	                        }),
	                        onError: onError
	                    });
              }  // if( parentItem.root == true )
          }  // getChildren          
      });  // treeModel
  
      var myTree = new dijit.Tree({
          model: treeModel,
          openOnClick:true,
          showRoot: false
      }, "treeThree");

    });  //dojo.ready
</script>
</syntaxhighlight>
Play with the working example found here: [http://pmis.biz/rwa/dijit.tree_1.php dijit.tree example 1]. There is also a tab showing the Json file used in the example. It is possible to test the code in various dojo versions.

==AccordionContainer==
The tree is implemented in a dijit.layout.AccordionContainer in the working example found here: [http://pmis.biz/rwa/dijit.tree_1.php dijit.tree example 1].

===Verified in===
IE 8, Firefox 3.6.22, Dojo 1.6.1 

==References==
* [http://www.dojotoolkit.com dojoToolkit] 
* [http://www.mediawiki.org/wiki/Help:Magic_words Help:Magic_words]

==Document History==
{| class="wikitable"
|-
! Version
! Date
! Author
! Status
! Purpose of update
|-
| 1
| 1 Mar 2012
| PSA
| Draft
| Not released.
|-
| 
| 
| 
| 
| 
|}

[[Category:software development]]
[[Category:HTML5]]
[[Category:Dijit.Tree]]
[[Category:dojo.data.ItemFileWriteStore]]
[[Category:dijit.tree.ForestStoreModel]]
[[Category:dojo.ready]]