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

From PMISwiki
Jump to navigation Jump to search

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.

<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. There is also a tab showing the Json file used in the example.

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

Document History

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