DHTMLX Docs & Samples Explorer

### Event Handling In Case Of Contextual Menu

zoneA
zoneB
zoneC
Source

    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxmenu_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxmenu.js"></script>
    <script src="../../codebase/ext/dhtmlxmenu_ext.js"></script>

    <div style="height: 380px; position: relative;">
        <div id="zoneA" style="position: absolute; left:  50px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF;">zoneA</div>
        <div id="zoneB" style="position: absolute; left: 170px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF;">zoneB</div>
        <div id="zoneC" style="position: absolute; left: 290px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF;">zoneC</div>
    </div>
    <div id="ta" style="width: 500px; height: 160px; border: #909090 1px solid; overflow: auto; font-size: 10px; font-family: Tahoma;"></div>

    <br>
    <script>var menu = new dhtmlXMenuObject();
    menu.setIconsPath("../common/imgs/");
    menu.renderAsContextMenu();
    menu.loadXML("../common/dhxmenu.xml?e=" + new Date().getTime());
    menu.addContextZone("zoneA");
    menu.addContextZone("zoneB");
    menu.addContextZone("zoneC");
    //;
    menu.attachEvent("onBeforeContextMenu", function(zoneId) {
        if (zoneId == "zoneA") {
            printLog("<b>onBeforeContextMenu</b>: context menu will shown at <b>" + zoneId + "</b>; deny (return false)<br>");
            return false;
        }
        printLog("<b>onBeforeContextMenu</b>: context menu will shown at <b>" + zoneId + "</b>; allow (return true)<br>");
        return true;
    });
    menu.attachEvent("onAfterContextMenu", function(zoneId) {
        printLog("<b>onAfterContextMenu</b>: context menu was shown at <b>" + zoneId + "</b><br>");
    });
    menu.attachEvent("onClick", function(id, zoneId) {
        printLog("<b>onClick</b>: " + id + " was clicked, context menu at zone <b>" + zoneId + "</b><br>");
    });
    menu.attachEvent("onRadioClick", function(gruop, checked, clicked, zoneId) {
        printLog("<b>onRadioClick</b>: " + clicked + " was clicked, context menu at zone <b>" + zoneId + "</b><br>");
        return true;
    });
    menu.attachEvent("onCheckboxClick", function(id, state, zoneId) {
        printLog("<b>onCheckboxClick</b>: " + id + " was clicked, context menu at zone <b>" + zoneId + "</b><br>");
        return true;
    });
    menu.attachEvent("onShow", function(parentId) {
        if (parentId == null)
            parentId = "null";
        printLog("<b>onShow</b>: menu was shown, parentId <b>" + parentId + "</b><br>");
    });
    // adding onHide event handler;
    menu.attachEvent("onHide", function(parentId) {
        if (parentId == null)
            parentId = "null";
        printLog("<b>onHide</b>: menu was hidden, parentId <b>" + parentId + "</b><br>");
    });
    function printLog(text) {
        document.getElementById("ta").innerHTML = text + document.getElementById("ta").innerHTML;
        document.getElementById("ta").scrollTop = 0;
    }</script>