Start Building Professional
Web Apps Today

Context menu in a subgrid invokes parent grid.

Hi,

The call back function to the "onBeforeContextMenu" event attached to a subgrid is invoked for both subgrid and parent grid when the subgrid is "right-clicked". The first two parameters, namely RowId and CellIdx are from the subgrid for the two invocations; whereas the third Grid parameter refers to both subgrid and parent grid correspondingly. Finally the "onButtonClick" function is fired on the parent grid and not on the subgrid.

NOTE: In my use-case, i am loading the parent and sub-grid using loadXMLString() function.

Please let me know how to cancel the invocation of the parent grid when the subgrid's context menu is selected/clicked.

The following javascript island when executed with the pro_subgrids.html would illustrate the point.

    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid_skins.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxMenu/codebase/skins/dhtmlxmenu_standard.css">

    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxgrid.js"></script>
    <script src="../../codebase/dhtmlxgridcell.js"></script>    
    <script src="../../codebase/excells/dhtmlxgrid_excell_sub_row.js"></script>    
    <script src="../../../dhtmlxMenu/codebase/dhtmlxmenu.js"></script>

<script>
var currGrid;
    function onButtonClick(menuitemId,type){
var data = mygrid.contextID.split("_"); //rowId_colInd
currGrid.setRowTextStyle(data[0],"color:"+menuitemId.split("_")[1]);
        alert("Alert2: "+currGrid.getRowsNum());
        return true
    }
    function my_pre_func(rowId,celInd,grid){
alert("Alert1: "+grid.getRowsNum());
     currGrid = grid;
     if (celInd==1) return false;
     return true;
    }
    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");

    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("A,B,ed,Price,In Store,Shipping,Bestseller,Date of Publication");
    mygrid.setInitWidths("50,150,100,80,80,80,80,200")
    mygrid.setColAlign("right,left,left,right,center,left,center,center")
    mygrid.setColTypes("sub_row,edtxt,ed,price,ch,co,ra,ro");
    mygrid.attachEvent("onSubGridCreated",doOnSubGridCreated);
mygrid.enableContextMenu(menu);
    mygrid.attachEvent("onBeforeContextMenu",my_pre_func);
    mygrid.init();
    mygrid.setSkin("modern");
    mygrid.loadXML("sgrid.xml");

    function doOnSubGridCreated(subgrid,id,index) {
        subgrid.enableContextMenu(menu);
        subgrid.attachEvent("onBeforeContextMenu",my_pre_func);
        return true;
    }
</script>

Thanks.

mygrid.enableContextMenu(menu); 
  mygrid.attachEvent("onBeforeContextMenu",my_pre_func); 
   
Delele this rows and context menu will invoke only for tthe sub grid.

>>the invocation of the parent grid when the subgrid's context menu is selected/clicked.
If you are using the same menu object for both top and sub grids, it will trigger event code attached to onButtonClick without relation to grid from which menu was opened. 
You can use different context menu or lock last active grid instance through onBeforeContextMenu event. 

>>The call back function to the "onBeforeContextMenu" event attached to a subgrid is invoked for both subgrid and parent grid when the subgrid is "right-clicked"
This is an unexpected side effect of current implementation. 
Issue will be fixed in next version, for now you can update source code as 

dhtmlxgrid.js , line 1185
                if (this._ctmndx.showContextMenu){
                      ....
                } else {
                      ....
                }
can be replaced with 
                if (this._ctmndx.showContextMenu){
                      ....
                } else {
                      ....
                }
                ev.cancelBubble=true;