Context menu based on item properties

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).

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>
<script language="JavaScript" src="../../../dhtmlxMenu/codebase/ext/dhtmlxmenu_ext.js"></script>
 
 
 
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:260px; height:260px;background-color:#f5f5f5;border :1px solid Silver;"/>
        </td>
        <td valign="top">
        </td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
<div id="aler"></div>
<br>
<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.attachEvent("onBeforeContextMenu", function(itemId) {
    if (tree.hasChildren(itemId) > 0) {
        menu.hideItem('outher');
    } else {
        menu.showItem('outher');
    }
    return true;
});
tree.loadXML("../common/tree3.xml");</script>
<br><br>