Tree and Context menu

Context menu is attached to the first tree. Drag-n-drop any item from the second tree into the first one. Context menu will be set for the dropped item as well. The same rule works for the drag-n-drop from the tree with context menu into the one without, in this case context menu will be disabled for the dropped item.

Tree with context menu

Tree without context menu

Source

<link rel="stylesheet" type="text/css" href="../../../dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>    
<script language="JavaScript" src="../../../dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
 
 
 
<table>
    <tr>
        <td>
            <h3>Tree with context menu</h3>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div>
            <h3>Tree without context menu</h3>
            <div id="treeboxbox_tree2" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div>
        </td>
        
    </tr>
</table>
 
<script>function onButtonClick(menuitemId, type) {
    var id = tree.contextID;
    tree.setItemColor(id, menuitemId.split("_")[1]);
}
menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/images/");
menu.renderAsContextMenu();
menu.attachEvent("onClick", onButtonClick);
menu.loadXML("../common/_context.xml");
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
 
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableDragAndDrop(true);
tree.enableContextMenu(menu);
tree.loadXML("../common/tree3.xml");
 
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);
 
tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree2.enableSmartXMLParsing(true);
tree2.enableDragAndDrop(true);
tree2.loadXML("../common/tree3.xml");</script>
<br><br>