Display content inline with a dijit Tree

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?

A good place to start is [looking at some examples](http://dojotoolkit.org/reference-guide/1.9/dijit/Tree-examples.html). — Bucket, May 23 '14 at 13:26
Thanks for the comment. I had already read that page, but upon re-reading it, realised there was a hint of what to do in the rich text example. I'll post what I did for future generations. — Kate, May 23 '14 at 14:49

score 0 · Answer 1 · answered May 23 '14 at 14:57

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.

Display content inline with a dijit Tree

1 Answers1