Check documentation for the latest version of dhtmlxSuite Integration with dhtmlxMenu DHTMLX Docs

Integration with dhtmlxMenu

The mentioned functionality requires PRO version of the dhtmlxGrid package

To create a context menu in the grid, use the technique as in:

<link type="text/css" href="../codebase/dhtmlx.css">
<script  src="../codebase/dhtmlx.js"></script>    
 
<script>
    // Create a function for processing menu commands
    function onButtonClick(menuitemId){
        // Get array the 1st element of which is the row id, the 2nd - the cell index
        var data = myGrid.contextID.split("_"); // rowId_colInd
        // Use input data to perform any action you need
        myGrid.setRowTextStyle(data[0],"background-color:"+menuitemId.split("_")[1]);
    };
 
    // Create a menu
    myMenu = new dhtmlXMenuObject();
    myMenu.setIconsPath("../common/images/");
    myMenu.renderAsContextMenu();
    myMenu.attachEvent("onClick",onButtonClick);
    myMenu.loadStruct("../common/_context.xml");
 
    // Initialize the grid and attach the menu to it
    myGrid = new dhtmlXGridObject('gridbox');  
    myGrid.setSkin("dhx_skyblue");                
    myGrid.setImagePath("../codebase/imgs/");       
    myGrid.setHeader("Name, Email, Age"); 
    myGrid.enableContextMenu(myMenu);
    myGrid.init();
</script>

Related sample:  Context menu

The mygrid.contextID is a complex string consisting of the row id and the column index delimited with "_".

Related events

dhtmlxGrid supports the onBeforeContextMenu event that allows you to provide a custom behaviour for the context menu:

function my_pre_func(rowId,celInd,grid){
    if (celInd==1) return false;
    return true;
};
 
myGrid.attachEvent("onBeforeContextMenu", my_pre_func);

Related sample:  Context menu for specific column

Back to top