Display content inline with a dijit Tree - dojo

Question

I'm using Dojo and would like to create a tree like structure. However, I'd like to be able to display content within the tree once the end node in a particular branch has been expanded. e.g.
top
- a branch
-- last item in this branch
[some content such as a div, span, image etc]
-- another item in this branch
[some more content]
etc
Does anyone know if this can be achieved using dijit Tree and if so, any pointers?

Answer 1

After digging around in the docs I've found a way to do this. It's not simple so thought I'd share. This page has an example of how to display a tree node with a rich text label rather than just text. This involves declaring your own class that inherits from Tree._TreeNode, allowing you to control it's creation. This same technique can be used.
When creating a Tree, I override the _createTreeNode function as follows:
_createTreeNode: function (args) {
if (args.item.type === "content") {
return new LayerManagerContentNode(args);
} else {
return new Tree._TreeNode(args);
}
}
In my store I add an object to represent the content that I want to display inline and give it a type of 'content'.
I create a class that inherits from Tree._TreeNode as follows:
define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dijit/form/Button",
"dijit/Tree"
], function (declare, lang, dom, domConstruct, on, Button, Tree) {
return declare("my/ui/platforms/desktop/parts/LayerManagerContentNode", [Tree._TreeNode], {
// summary:
// ...
constructor: function () {
},
postCreate: function () {
var button = new Button({
label: "Test"
});
this.domNode.innerHTML = "<div></div>";
this.domNode.innterText = "";
button.placeAt(this.domNode, "first");
}
});
});
in the postCreate, I create a button (this was just for testing, I'll probable create a content pane or something to further populate) to be displayed in place of the usual tree node. I then replace the tree nodes innerHTML and innerText to hide what would normally be displayed, en voila, it works!
I dare say there are better ways to do this so if anyone comes along and has one, please add it.