title: How to place checkboxes in a tree?
body: <p>Can someone suggest how can I place check boxes against each folder of the below tree hierarchy? I am trying to add check-boxes but it is not showing up in my tree shown below. Please suggest the changes i need to make for my below code to get the checkbox displayed. This is a working code , just copy paste the same in a textpad and open in IE allowing activex.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css"&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css"&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css"&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css"&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
          data-dojo-config="isDebug: true,parseOnLoad: true"&gt;&lt;/script&gt;
              &lt;link rel="stylesheet" href="css/style.css" media="screen"&gt;
      &lt;script&gt;
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Form");
      dojo.require("dijit.form.Select");
      dojo.require("dijit.form.TextBox");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dojo.data.ItemFileWriteStore");
      dojo.require("dijit.tree.ForestStoreModel");
      dojo.require("dijit.tree.dndSource");
      dojo.require("dijit.Tree");
  
  
          dojo.addOnLoad(function() { 
              dojo.byId('loaderInner').innerHTML += " done.";
              setTimeout(function hideLoader(){
                  dojo.fadeOut({ 
                      node: 'loader', 
                      duration:500,
                      onEnd: function(n){
                          n.style.display = "none";
                      }
                  }).play();
              }, 250);
  
        }); 
  
      var store;    
      var selectedItemId = 0;
      var itemSelected = null;
      var sel          = null;
      var idCount      = 0;
  
      var treeModel; 
      var mytree;
  
      var modeSelector;               
  
      dojo.ready(function(){
  
              store = new dojo.data.ItemFileWriteStore({
                        contentType: 'application/json',
                        target: 'store',
                        url: "http://pmis.biz/rwa/data/ProjectList.php"         
              });                 
              treeModel = new dijit.tree.ForestStoreModel({ 
                  iconClass: 'dijitEditorIcon dijitEditorIconCut', 
                  store: store,
                  query: {"main": 0},                
                  rootId: 0,                
                  rootLabel: "project",
                  pasteItem: function(){},             
                  mayHaveChildren : function(item) {
                     return true;
                  },
  
                  getChildren: function(parentItem, callback, onError) {
                      if(parentItem.root == true  ){
  
                         if(this.root.children){
  
                              callback(this.root.children);
                         }else{
                             this.store.fetch({
                                  query: this.query,
                                  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);
                           if (idCount &lt; parseInt(parentItem.id)){
                             idCount = parseInt(parentItem.id);
                         }      
  
                             var sx = parseInt(parentItem.id);
                             this.store.fetch({
                                  query: { main: sx },
                                  queryOptions: {cache:false},
                                  onComplete: dojo.hitch(this, function(items){
                                      this.root.children = items;
                                      callback(items);
                                  }),
                                  onError: onError
                              });
                      }  
                  } 
              }); 
  
              mytree = new dijit.Tree({
                  model: treeModel,
                  openOnClick:true,
                  showRoot: true,                
                  setCheckboxOnClick : true,
                //  onDblClick: function (item, node, evt){ 
  
                //  },                 
                  onClick: function (item, node, evt){
                      resetEditor();
                  }  
  
              }, "treeThree");
      });    
          &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body class="claro"&gt;
  &lt;!-- BorderContainer --&gt;
  &lt;div id="main" data-dojo-type="dijit.layout.BorderContainer" 
           data-dojo-props="liveSplitters:false, design:'headline',
           style:'width:100%; height:100%; max-width:1050px; min-width:680px; min-height:400px; margin: 0 auto;'"&gt;
  
      &lt;!-- AccordionContainer--&gt;
      &lt;div data-dojo-type="dijit.layout.AccordionContainer" 
          data-dojo-props="region:'leading', splitter:true, minSize:20" style="width: 630px;" id="leftAccordion"&gt;
  
          &lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'NG Tree Hierarchy'"&gt;
  
        &lt;div data-dojo-type="dijit.layout.ContentPane" 
             data-dojo-props="title:'Rootless Tree',
             style:'width:30%; height:100%; max-width:1050px; min-width:250px; min-height:300px; margin: 0 auto; float:left'"&gt;
             &lt;div id="treeThree"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
  
  &lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Rootless CCCCCC'"&gt;
        &lt;!-- Project selector --&gt;
        &lt;div id=help"&gt;&lt;/div&gt;&lt;br&gt;
        &lt;br&gt;    
       &lt;!--   &lt;select id="f_2"&gt;&lt;/select&gt;--&gt;
  
        &lt;br&gt;
   &lt;div&gt;
      &lt;table style="width: 135px; height: 83px;"&gt;
        &lt;tr&gt;&lt;td&gt;
        &lt;div id="ip"&gt;&lt;/div&gt;
        &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;        
        &lt;button id="bd" data-dojo-type="dijit.form.Button"  style="visibility:hidden"
         data-dojo-id="bd"
         data-dojo-props="disabled: true,
                          onClick: function (evt){
                                       store.deleteById(selectedItemId);
                                       resetEditor();
                                   },
                          label:'Delete project' "&gt;    
        &lt;/button&gt;
  
        &lt;button id="bs" data-dojo-type="dijit.form.Button"  style="visibility:hidden"
         data-dojo-id="bs"
         data-dojo-props="disabled: true,
                          onClick: function (evt){
                              var lvalue = dijit.byId('s1').value;
                              store.setValue(itemSelected, 'title', dijit.byId('s1').value);
                              store.setValue(itemSelected, 'description', dijit.byId('s2').value);
                              store.save();
                          },
                          label:'Save project' "&gt;    
        &lt;/button&gt;
        &lt;button id="ba"data-dojo-type="dijit.form.Button"  style="visibility:hidden"
         data-dojo-id="ba"
         data-dojo-props="disabled: true,
                          onClick: function (evt){
                              idCount = idCount +1;                        
                              var newItem = {};
                              newItem.id = idCount;
                              newItem.main = selectedItemId;
                              newItem.title = dijit.byId('s1').value;
                              newItem.description = dijit.byId('s2').value;
  
                              store.newItem(newItem);
                              sel.setStore(store,'',{query:{main: 0}});
                              /* mytree.update();*/
                          },
                          label:'Add project' "&gt;    
        &lt;/button&gt;
        &lt;br&gt;
        &lt;button onclick="mytree.refreshModel()"  style="visibility:hidden"&gt;
            Update
        &lt;/button&gt;
  
       &lt;/tr&gt;
  
      &lt;/table&gt; 
      &lt;br&gt;
    &lt;/div&gt;           
  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:''"&gt;
              &lt;div&gt;&lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  
  
  
     &lt;div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Top tabs (marked as "center" to take up the main part of the BorderContainer) --&gt;
          &lt;div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs"&gt;
  
              &lt;div id="basicFormTab1" data-dojo-type="dijit.layout.ContentPane" 
                               data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'"&gt;
  
  &lt;p&gt; &lt;/p&gt;            
          &lt;/div&gt;
  
          &lt;div id="basicFormTab2" data-dojo-type="dijit.layout.ContentPane" 
                                data-dojo-props="title:'Tab2', style:'padding:10px;display:none;'"&gt;
  
  &lt;p&gt; &lt;/p&gt;            
          &lt;/div&gt;
              &lt;div id="basicFormTab3" data-dojo-type="dijit.layout.ContentPane" 
                                data-dojo-props="title:'Tab3', style:'padding:10px;display:none;'"&gt;
  
  &lt;p&gt; &lt;/p&gt;            
          &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>