A contextual menu can be easily added to dhtmlxTree. The content of this menu can be set with XML or script. To enable the contextual menu, the user should do the following:

 
        <script>      
                //initialization of the menu      
            menu = new dhtmlXMenuObject(null,"standard");
            menu.setImagePath("[full path to this folder]/dhtmlxMenu/codebase/imgs/");
            menu.setIconsPath("[full path to this folder]/images/");    
            menu.renderAsContextMenu();
            menu.loadXML("_context.xml");
 
 
 
                //initialization of the tree
            tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
            ...
                //link the contextual menu to the tree      
            tree.enableContextMenu(aMenu);
        </script>
 
 

One contextual menu content can be attached to the whole tree. If the user wants the menu to be shown differently depending on the item it was called for, menu methods hideButtons/showButtons should be used.

Note: Refer for more information on the above mentioned menu buttons to dhtmlxMenu Guide and Code Samples documentation.

      <div id="treeboxbox_tree" style="width:200;height:200"></div>
 
 
 
      <script> 
          function onButtonClick(menuitemId,type){
              var id = tree.contextID;
              tree.setItemColor(id,menuitemId.split("_")[1]);
          }
              //initialization of the menu
          menu = new dhtmlXMenuObject(null,"standard");
          menu.setImagePath("[full path to this folder]/dhtmlxMenu/codebase/imgs/");
          menu.setIconsPath("[full path to this folder]/images/");
          menu.renderAsContextMenu();
          menu.setOpenMode("web");
          menu.attachEvent("onClick",onButtonClick);
          menu.loadXML("_context.xml");
              //initialization of the tree
          tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
          tree.setImagePath("../imgs/");
          tree.enableDragAndDrop(true);
          tree.enableContextMenu(menu);
              //link contextual menu to the tree
          tree.loadXML("tree.xml")
 
          tree.attachEvent("onBeforeContextMenu",function(itemId){
              if (tree.hasChildren(itemId) > 0){
                  menu.hideItem('outher');
              } else {
                  menu.showItem('outher');
              }
              return true
          })
      </script>
 

If the user wants to set different menus for individual tree items, he should use the following method:

      <script>
          tree.setItemContextMenu(itemId,cMenu);
      </script>
 

The parameters here are responsible for:

• itemId - id of the item the contextual menu will be attached to;
• cMenu - contextual menu object that will be attached.