dijitt.Tree: Styling Toplevel Entries only

Question

I'm using dijit/Tree with data based on a large, hierarchical JSON String. So far it works like a charm. Even the styling with CSS looks good, but now I have to change the style only for the toplevel elements. Whats the best way to select those entries only? As far as I can see there is now explicit class for them.

Somebody an idea?

kindly regards Marcus

Answer 1

Meanwhile I found a solution.

You have to implement the onOpen function of the tree and add a CSS class to all children of the recently opened node:

var tree = new dijit.Tree({
    model: treeModel,
    id: "navTree",       
    showRoot: false,
    autoExpand: false,       
    onOpen: function(item, node){
     var subNodeList = node.getChildren();       
     addMyClasses(subNodeList,(node.indent+1));
    },        
     openOnClick: false
}

function addMyClasses(nodeList,level){
   nodeList.forEach(function(entry){      
    entry.labelNode.className += " treeNavLevel"+level;   
   });
}

In my case I add a different CSS class for every level of the tree. You can get the level from the node.indent field