Hi, is it possible to embed images (or any html code) into the tree nodes?
I know you can change the icons but what if I want to use some images where the data text is?
Cheers,
Bart
Hi, is it possible to embed images (or any html code) into the tree nodes?
I know you can change the icons but what if I want to use some images where the data text is?
Cheers,
Bart
These seems to be a frequent
These seems to be a frequent request, but I haven't seen any authoritative answer.
My non-expert opinion is that depending on your need, you might be able to get a background image to work by setting it in the class CSS for the label. If you want it to be dynamic, you'll probably want to set a custom class dynamically using getLabelClass. I haven't played around much with the CSS background image hack, but my gut feel is that it limits your ability to position the image with respect to the text.
For a more general solution, you'd have to override the setLabelNode method of the _TreeNode. Since _TreeNode is private, this would be an unsupported change that could break in future releases.
The problem is that setLabelNode explicitly uses document.createTextNode. In other words, it won't interpret arbitrary HTML. I don't see any hooks for overriding the node class used by dijit.Tree, nor for indirectly overriding the setLabelNode method.
Currently the method is:
setLabelNode: function(label){ this.labelNode.innerHTML=""; this.labelNode.appendChild(dojo.doc.createTextNode(label)); },I'm not sure why it was done this way. If it's the "innerHTML is non-standard" argument, I wouldn't expect it to be there at all. In any event, if you change it to
setLabelNode: function(label){ this.labelNode.innerHTML=label; },it seems to do the right thing. This opens a security hole, so you have to make sure the label text is safe.
Perhaps someone with more Dojo experience can comment on what the best way to do this.
Gary