Context menu wrong z index?

Suite and Optimus Suite 5
#1

Running on FF 35.0 but reproduced on Chrome and IE11.

I am creating a grid inside a layout cell and attaching a context menu to the grid. This layout is inside a dialog window (absolutely placed element that appears as a floating window) However the context menu is displayed underneath the dialog.

This works fine with the same code using 3.6 but now with 4.12 it is showing this odd behavior. The menu is being displayed and when the dialog window is closed you can then see the context menu.

code is below from the point that the grid has been attached to the layout. Only change was to the image/icon paths and the menu load due to 4.12 changes.

Any suggestions?

I’ve tried specifying an element id in the dhtmlXMenuObject instantiation and use css to set that element to a z index higher than anything we use but this didn’t make any difference.

//create grid in layout
myGrid = myLayout.cells("b").attachGrid();

//configure grid 
myGrid.setImagePath("/dhtmlx/imgs/dhxgrid_skyblue/");
myGrid.setHeader("Select,Name");
myGrid.setColTypes("ch,ro");
myGrid.setInitWidths("50,*");
myGrid.setColAlign("center,left");
myGrid.enableMultiselect(true);
myGrid.attachEvent("onCheck", updateTreeCheckbox);

myGrid.setColSorting("str,str");
myGrid.setCustomSorting(natural_sort_compare, 1);

// configure context menu
myMenu = new dhtmlXMenuObject();
myMenu.renderAsContextMenu();
myMenu.setIconsPath("/dhtmlx/imgs/dhxmenu_skyblue");
myMenu.attachEvent("onClick", onMenuClick);
myMenu.loadStruct("<?xml version='1.0'?><menu id='0'><item id='select' text='Select Items'/><item id='deselect' text='Deselect Items'/></menu>");
myGrid.enableContextMenu(myMenu);

myGrid.init();
myGrid.setUserData("", "Dir", dir);
myGrid.attachEvent("onXLE", loadDone);
myGrid.attachEvent("onBeforeContextMenu", onShowContext);
#2

Hello
Locally works fine. Could you provide us completed demo on support@dhtmlx.com to inspect it? Add a link to this topic there please.
docs.dhtmlx.com/auxiliary_docs__ … pport.html

#3

Unfortunately I can’t make a full system available to the public as this is an appliance interface and not suited to internet access.

If you can offer suggestions for what to look at, I would appreciate it.

#4

Interesting… even if you specify an element id in the new dhtmlXMenuObject(“recover_context_menu”);

The menu is created in the DOM body element and not the specified element. Also, the z-index is set to 105 and the overlay_modal inside it is set to z-index of 1503.

Unfortunately the dialog this context menu needs to appear over has a z-index of 1754.

Is there a way to force a different z-index?

I’ve tried the following to no effect:

div.dhtmlxMenu_dhx_skyblue_SubLevelArea_Polygon {
z-index: 2000;
}
div.dhtmlxMenu_dhx_skyblue_SubLevelArea_Polygon div {
z-index: 2000;
}
table.dhtmlxMebu_SubLevelArea_Tbl {
z-index: 2000;
}

#5

Ignore the overlay_modal comment… it is an element that appeared after the menu element in the DOM

#6

Problem fixed… I had to do it programatically with:

myMenu.attachEvent(“onShow”, onShowContextMenu);

function onShowContextMenu(id) {
function setz(ele) {
ele.setStyle({ ‘z-index’:‘3000’ });
}

var divmenu = $$('div.dhtmlxMenu_dhx_skyblue_SubLevelArea_Polygon');
if (divmenu) {
    divmenu.each(setz);
}

}

Note, the above uses prototype.js functionality… similar (and probably easier) functionality can be done in jquery but I have to live with a lot of legacy code.