how to associate (bind) a dijit.Menu with specific nodes of a dijit.Tree

Question

I have been able to bind a simple dijit.Menu with two MenuItems to the nodes of a dijit.Tree wtih Menu.bindDomNode(Tree.domNode), but I would like to refine what nodes get the context menu and am having trouble getting domNodes from Tree items to bind the menu to. I am hoping there is a much easier way of doing this?

    datStore = this.DataStore;

    mdl = this.Model;

    tree = this.Tree;

    datStore.fetch({

        query: { nodeType: "ROOT" },
        onItem: function(item, request) {

            dojo.forEach(datStore.getValues(item, "children"), function(childItem) {

  var itemNode = tree.getNodesByItem(mdl.getIdentity(childItem));

  console.log(itemNode): //returns the widget, and the widget has a domNode property that seems ok with firebug traversing of the itemNode object, though the div value is 'dimmed' in firebug (not valid node yet in the DOM?)

                console.log(itemNode.domNode);//returns 'undefined', so the binding below does not work

                if (childItem.nodeType == "MATCHED_VALUE") {

                   Menu.bindDomNode(itemNode.domNode);

                }

            });
        }
    });

Answer 1

Your way looks OK. You could also keep binding to the Tree node itself but override Menu._openMyself(). There's similar code in test_Tree.html:

dojo.connect(menu, "_openMyself", this, function(e){
// get a hold of, and log out, the tree node that was the source of this open event
var tn = dijit.getEnclosingWidget(e.target);
console.debug(tn);

// now inspect the data store item that backs the tree node:
console.debug(tn.item);

// contrived condition: if this tree node doesn't have any children, disable all of the menu items
dojo.forEach(menu.getChildren(), function(i){ i.set('disabled', !tn.item.children); });

// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
});

However, I don't think that's necessarily better than your way.