Dojo: multiple right-click Menus on a large Tree

756 Views Asked by At

I am trying to define multiple right click Menus on a large Tree. ( using dojo 1.8). I've got 20+ different type of data items in the tree. For each of this data items type there is a specific right-click menu. I've tried to attach the Menu to the TreeNode with the 'selector' of the Menu as explained in http://dojotoolkit.org/reference-guide/1.9/dijit/Menu.html#attaching-to-multiple-nodes. I've added to each treeNode a class with the name of the type and defined the menu selector accordingly.

One of the 20+ menu:

   var personMenu = new dijit.Menu({
      targetNodeIds: ["theTree"],
      selector: ".type_person", 
      menutype: 'person'
   });
   personMenu.addChild(new dijit.MenuItem({   
      label: "person properties", 
      onClick: function(){ createDialog('edit');}
   }));            

The TreeNode creation with the type added as className:

     _createTreeNode: function(args){
        //Logger.info("_createTreeNode "+args.item.type+";");
        args.className = 'type_'+args.item.type;

        console.dir(args);
        var node = new dijit._TreeNode(args);

My problem is that used in a tree, it does not work properly: the menu for some treeNode of type A sometimes appears on all its children. It seems related to the order of the definition of the Menus. There is a little bit less problems if I define first the menus for the data items used as parent to others. Unfortunately I've got data items that can be parent and/or child of others, those types may appear at all depth in the tree, so changing the order of the menu creation is not enough to solve the problem...

Am I doing sth wrong ? Is there any 'selector' trick to handle this case ? ( as the tree is quite large, I would prefer to avoid using TreeNode id's )

Thanks for any help,

1

There are 1 best solutions below

0
On

Try this way but remember if you get store is not avaialble please declare your store globally like _store:store. for menuitems this should work try it out, it works for my case

onClick: function (evt){
                                idCount = idCount +1;
                                var newItem = {};
                                newItem.id = idCount;
                                newItem.main = selectedItemId;
                                store.newItem(newItem);
                                sel.setStore(store,'',{query:{main: 0}});
                                /* mytree.update();*/
                            },

    <ul dojoType="dijit.Menu" id="ba" style="display: none;">
      <li dojoType="dijit.MenuItem" onClick="function (evt)">Add a new folder</li></ul>