Sample: dhtmlxTree Context menu based on item properties dhtmlxTree main page
X

Right click on any tree node.
In the example below context menu is one for all items, but it is shown differently by using the hideButtons/showButtons menu methods (nodes without child items have more buttons in context menu).


 
<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]);
    }
 
    //init menu
        menu = new dhtmlXMenuObject(null,"standard");
        menu.setImagePath("../../../dhtmlxMenu/codebase/imgs/");
        menu.setIconsPath("../images/");
        menu.renderAsContextMenu();
        menu.setOpenMode("web");
        menu.attachEvent("onClick",onButtonClick);
        menu.loadXML("_context.xml");
    //init tree    
        tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
        tree.setImagePath("../imgs/");
        tree.enableDragAndDrop(true);            
        tree.enableContextMenu(menu); //link context menu to 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>


THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.