Programmatic Dijit/Tree Not Appearing in Declarative Dijit/ContentPane

Question

Can anyone help me figure out why this works in Dojo 1.8 but not in 1.9?

In 1.8, the tree is placed within the “pilotTreeContainer” contentpane. In 1.9, the tree is there if you look in Firebug but visually, it just shows a loading graphic. pilotTreeContainer is declared in the template file for the widget that contains this code. All this code is in the postCreate method.

var treeStore = lang.clone( store );

var treeModel = new ObjectStoreModel(
{
    store: treeStore,
    query: { id: 'all' },
    mayHaveChildren: function ( item ) // only ships have the unique attribute
    {
        return item.unique === undefined;
    }
} );

var pilotTree = new Tree(
{
    model: treeModel, // do we need to clone?
    autoExpand: true,
    showRoot: false,
    title: 'Click to add',
    openOnClick: true,
    getDomNodeById: function ( id ) // new function to find DOM node
    {
        if ( this._itemNodesMap !== undefined && this._itemNodesMap[ id ] !== undefined && this._itemNodesMap[ id ][0] !== undefined ) {
            return this._itemNodesMap[ id ][0].domNode;
        }
        else {
            return null;
        }
    }
} );


this.pilotTree = pilotTree;

this.pilotTreeContainer.set( 'content', pilotTree );

I’ve tried calling startup on both tree and contentpane.

Debugging the dijit/Tree code, it seesm that there is a deferred which never resolves. It is returned from the _expandNode function when called from the _load function (when trying to expand the root node this._expandNode(rn).then).

The part that fails in dijit/Tree is this:

// Load top level children, and if persist==true, all nodes that were previously opened
this._expandNode(rn).then(lang.hitch(this, function(){
    // Then, select the nodes specified by params.paths[].
    this.rootLoadingIndicator.style.display = "none";
    this.expandChildrenDeferred.resolve(true);
}));

Why is the tree not showing? What is going wrong?

Not easily. I'm migrating a complex Dijit-based project from 1.8 to 1.9 and this is just one small part of it. — voidstate, Apr 21 '14 at 23:14
This is probably a silly question but are you calling pilotTree.startup(); ? — Andrew Daniel, May 15 '15 at 10:33
Seems to me, this has to do with events being fired in unexpected / wrong sequence. From docs, _Widget interface `.startup()` is called only when first child is added to it which should be `this.pilotTreeContainer.set( 'content', pilotTree );`. Any possibility to move the tree code onto a separate widget and initializing it before? Maybe `pilotTree.startup()` is excactly whats needed as AJD proposes. See http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html and more thoroughly described here: https://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/ — mschr, Jul 17 '15 at 18:50

score 0 · Accepted Answer · answered Oct 09 '15 at 09:04

Coming back to this (in the hope that it would be solved in Dojo 1.10), I have found a fix.

I abstracted the tree into its own module, adding it to the container with placeAt() instead of using this.pilotTreeContainer.set( 'content', pilotTree );:

// dijit/Tree implementation for pilots
pilotTree = new PilotTree( 
{
    model: treeModel 
} );


// add to container
pilotTree.placeAt( this.pilotTreeContainer.containerNode ); 
pilotTree.startup();

then forced it to show its content within the tree's startup() method:

startup: function()
{
    this.inherited( arguments );

    // force show!
    this.rootLoadingIndicator.style.display = "none";
    this.rootNode.containerNode.style.display = "block";
},

Programmatic Dijit/Tree Not Appearing in Declarative Dijit/ContentPane

1 Answers1