DHTMLX Docs & Samples Explorer

Index
dhtmlxtree
Compatibility with Other DHTMLX Components

## Compatibility with Other DHTMLX Components

### Enabling Contextual Menu

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>

### Contextual Menu Based on Item's Properties

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>

### Contextual Menu for Individual Items

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.