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

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)

<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>

Play with the working example found here: dijit.tree example 1.

AccordionContainer

The tree is implemented in a dijit.layout.AccordionContainer in the working example found here: dijit.tree example 1.

Verified in

IE 8, Firefox 3.6.22, Dojo 1.6.1

References

• Help:Magic_words

Document History

Version	Date	Author	Status	Purpose of update
1	1 Mar 2012	PSA	Draft	Not released.