I have a dojo dijit.Tree, and I want to be able to put some html in the labels. To do this, I created an function called getCustomLabel and assigned it to the tree getLabel attribute:

tree = new dijit.Tree({
                model: aMOdel,
                showRoot: false,
                getLabel: getCustomLabel
            });

function getCustomLabel(item) {
    return '<b>'+item.name+'</b>'
}

This returns a Tree with the html escaped so that it displays in the tree. Does anyone know of a way to get unescaped html in a tree widget?

I have a dojo dijit.Tree, and I want to be able to put some html in the labels. To do this, I created an function called getCustomLabel and assigned it to the tree getLabel attribute:

tree = new dijit.Tree({
                model: aMOdel,
                showRoot: false,
                getLabel: getCustomLabel
            });

function getCustomLabel(item) {
    return '<b>'+item.name+'</b>'
}

This returns a Tree with the html escaped so that it displays in the tree. Does anyone know of a way to get unescaped html in a tree widget?

• javascript
• dojo
• tree

5 Answers 5

There is a very simple way actually :)

Right after the dojo.require statement add the following:

dojo.require("dijit.Tree");
dijit._TreeNode.prototype.setLabelNode = function (label) {
        this.labelNode.innerHTML = label;
};

With dojo release 1.7.1 the following works:

dojo.require("dijit.Tree");
dijit._TreeNode.prototype._setLabelAttr = {node: "labelNode", type: "innerHTML"};

Wouldn't unescape() achieve this?

function getCustomLabel(item) {  
    item.name = unescape(item.name);  
    return '<b>'+item.name+'</b>';  
}

you can use onClick event and redirect page to that addess:

<div dojotype="dijit.Tree" model="model" id="tree" >
            <script type="dojo/method" event="onClick" args="item,treeNode">
                        window.location = "/Default.aspx?ItemId=" + dataStore.getIdentity(item);
            </script>
        </div>

If you just want to print your label in bold, you can redefine getLabelStyle function of your dijit/Tree.

For instance:

getLabelStyle: function(item) {
    return {'font-weight': 'bold'};
}