get rid of '+' for expanding tree nodes when no children present

Question

I have a dojo tree where nodes on the tree that have no children should not have the '+' next to it that is normally clicked to expand and see children. I am using dojo version 1.10.4.

var treeJSON = [{"id": "0", "name":"TreeTop",   "type":"Enterprise", "parent":"", "sort_key":"0",},{"id": "1", "name":"West", "type":"Region", "parent":"0", "sort_key":"1"},{"id": "2", "name":"East", "type":"Region", "parent":"0", "sort_key":"2"},{"id": "3", "name":"SE", "type":"Region", "parent":"2", "sort_key":"0"}];

dojo tree jsfiddle

What I would like is what is seen in the dojo example (run the example for Expanding and selecting tree nodes programmatically:

Expanding and selecting tree nodes programmatically

You'll notice in the dojo example that 'Egypt' does not have a '+' when it starts up and shows an open folder because there is no children.

Answer 1

I came up with a solution that removes the '+' image icon next to tree elements that do not have children without changing any default tree behavior. Why this is not a default behavior for a dojo tree is beyond me.

In summary, when a tree item doesn't have any children I changed the style of the expando node object so the css for background-image for + is changed to none

In onOpen event:

itemObj.expandoNode.style['background-image'] = "none";

Updated jsfiddle showing a working example

When loading the tree during initialization, i create a hash of parent ids by calling this function and count how many reference the id (counting is not needed but I counted anyways):

var parentIds = {};
function buildParentIds(treeJSON) {
  for (var i=0;i<treeJSON.length;i++) {
    var parentId = treeJSON[i].parent;
    if (!parentIds.hasOwnProperty(parentId)) {
      parentIds[parentId] = 0;
    } 
    parentIds[parentId]++;
  }
  console.log('buildParentIds()');
  console.dir(parentIds);
}

Then, when creating the tree object, I override the onOpen event:

onOpen: function(item,node) {
  console.log('onOpen');
  if (node.containerNode) {
    for (var i = 0; i < node.containerNode.childElementCount; i++) {
      var chldNode = node.containerNode.childNodes[i];
      console.log('Node id: ' + chldNode.id);
      var itemObj = dijit.byId(chldNode.id);
      console.log('itemObj for ' + itemObj.item.name);
      console.dir(itemObj);
      //If item.id is not in parentIds then it has no children
      if (!parentIds.hasOwnProperty(itemObj.item.id)) {
        itemObj.expandoNode.style['background-image'] = "none";
      }
    }
  }
}

This is much more pleasing to the eye and is intuitive making it easy to see which tree elements have no chilren without having to click on each + on the tree nodes. You can still click where the + used to be which will cause the folder to open which displays nothing because there are no children.

Answer 2

In onOpenTreeNode function of the tree, I check every children and replace the class like this, but I already know if they have children or not.

onOpenTreeNode: function(item, node) {
  if (node.containerNode)
    for (var i in node.containerNode.children) {
      var elem = node.containerNode.children[i];
      if (i < node.containerNode.childElementCount)
        domClass.replace(elem.children[0].children[1], "dijitTreeExpando dijitTreeExpandoLeaf");
    }
}

Answer 3

In that demo new instance of dijit/Tree is created with property autoExpand set to true
(see data-dojo-props in last line of body).

    require(["dojo/aspect", "dojo/_base/window","dojo/store/Memory", "dojo/store/Observable",
      "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/parser",
      "dijit/tree/dndSource","dojo/topic"], function(aspect, win, Memory, Observable, ObjectStoreModel, Tree, parser, dndSource, topic){
try{
      var treeJSON = [{"id": "0", "name":"TreeTop",	"type":"Enterprise", "parent":"", "sort_key":"0",},{"id": "1", "name":"West", "type":"Region", "parent":"0", "sort_key":"1"},{"id": "2", "name":"East", "type":"Region", "parent":"0", "sort_key":"2"},{"id": "3", "name":"SE", "type":"Region", "parent":"2", "sort_key":"0"}];
       var myStore = new Memory({data: treeJSON});
       myStore.getChildren = function(object) {
         return this.query({parent: object.id}, {sort: [{attribute: "sort_key"}]});
       };

       aspect.around(myStore, "put", function(originalPut) {
	       return function(obj, options) {
	         if (options && options.parent) {
	           obj.parent = options.parent.id;
	         }
	         return originalPut.call(myStore, obj, options);
         }
       });
      myStore = new Observable(myStore);
      EvModel = new ObjectStoreModel({
        store: myStore,
        query: { id: "0" }
      });
      
      topic.subscribe("/dnd/drop",treeDropEvt2);
      
      tree = new Tree({
        autoExpand: true, // <== this was missing
        model: EvModel,
        dndController: dndSource,
        //onDndDrop: treeDropEvt,
        checkAcceptance:dndAccept,
	      checkItemAcceptance:itemTreeCheckItemAcceptance,
	      dragThreshold:8,
	      betweenThreshold: 5
      });

      tree.placeAt('currTree');

		  tree.onLoadDeferred.then(function(){
        console.log('onLoad event');
      });
      
      tree.set('paths',[['0','2','3']]); // Expand tree and highligh 'SE'
      
      tree.startup();
       
    } catch(err) {
      alert(err);
    }
    })
    
function treeDropEvt(source, nodes, copy) {
  console.log('treeDropEvt');
  console.dir(source);
  console.dir(nodes);
  console.dir(copy);
}

function treeDropEvt2(source, nodes, copy, target) {
  console.log('treeDropEvt2');
  console.dir(source);
  console.dir(nodes);
  console.dir(copy);
}

function dndAccept(source,nodes){
  console.log('dndAccept');
  console.dir(source);
  console.dir(nodes);
  return this.tree.id != "myTree";
}

function itemTreeCheckItemAcceptance(node,source,position){
  source.forInSelectedItems(function(item){
    console.log("testing to drop item of type " + item.type[0] + " and data " + item.data + ", position " + position);
  });
  var item = dijit.getEnclosingWidget(node).item;
  console.log('getEnclosingWidget(node).item: ');
  console.dir(item);
  console.dir(dijit.getEnclosingWidget(node));
   return position;
}
    

  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" />
  
  <body class="claro">
  <table border=1>
  <tr><td style="text-align: center;">Current Tree</td></tr>
  <tr><td style="vertical-align: top">
    <div id="currTree"></div>
  </td></tr>
  </table>     
  </body>