Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Eric Skaug on Jul 14, 2009 09:00
open dhtmlx forum
Context Menus with dhtmlxGrid (IE7)

I am trying to create a context menu associated with a grid object on my page. Unfortunately, the context menu always seems to render in the bottom left corner of my grid, distant from the actual location of the click.

Below is some paired-down source that I have been working with. I have tried at least a dozen permutations and reorderings of the renderAsContextMenu() and enableContextMenu() calls, among others, but nothing seems to resolve this positioning issue.

Any help you can offer would be much appreciated.

...
<link rel="STYLESHEET" type="text/css" href="<%= URL %>/scriptlib/dhtmlxSuite/dhtmlx.css">
<script src="<%= URL %>/scriptlib/dhtmlxSuite/dhtmlx.js"></script>
<script>
    var batchGrid;
    var contextMenu;
            
    function initGrid() {
        //Grid setup
        batchGrid = new dhtmlXGridObject("batchGridContainer");
        batchGrid.setImagePath("<%= URL %>/scriptlib/dhtmlxSuite/imgs/");
        batchGrid.setSkin("light");

        //Column layout
        batchGrid.setHeader("Report,Batch Id,Status,Started On,Committed?");
        batchGrid.attachHeader("#select_filter,#numeric_filter,#select_filter,,#select_filter");
        batchGrid.setInitWidths("*,75,75,160,90");
        batchGrid.setColAlign("left,right,left,left,left");
        batchGrid.setColTypes("rotxt,rotxt,rotxt,rotxt,rotxt");
        batchGrid.setColSorting("str,int,na,str,str");
                
        //add menu to grid
        batchGrid.enableContextMenu(contextMenu);
                
        //Events
        batchGrid.attachEvent("onRowDblClicked", openBatchDetails);

        //Fire it all off
        batchGrid.init();
        batchGrid.load("<%= actionURL %>/ReportController?action=getBatchList");
    }

...
            
    function initContextMenu() {
        //basic setup
        contextMenu = new dhtmlXMenuObject("contextMenuContainer", "light");
        contextMenu.setImagePath("<%= URL %>/scriptlib/dhtmlxSuite/imgs/");
        contextMenu.renderAsContextMenu();
        contextMenu.setOpenMode("web");
                
        //add items
        contextMenu.addNewChild(contextMenu.topId,0,"commit_batch","Commit Batch",false);
    }
            
    window.onload = function() {
        initContextMenu();
        initGrid();
    }
</script>
<body id="main-body">
    <div id="batchGridContainer" name="batchGridContainer" style="width:100%;height:100%;"/>
    <div id="contextMenuContainer" name="contextMenuContainer"/>
</body>
...
Answer posted by Alex (support) on Jul 15, 2009 02:11

Hello,

the issue isn't reproduced locally (the sample is sent by email). Possibly some custom page styles causes the issue. 

If the issue isn't solved, please provide the complete demo to support@dhtmlx.com

Answer posted by Eric Skaug on Jul 15, 2009 07:10
Thank you for the working sample.  It seems that my problem was that I was trying to use a grid style ("light") for my menu.  When I switched the menu style to "standard", everything worked well.
Answer posted by Alex (support) on Jul 15, 2009 07:40
Yes, there isn't light skin for menu. You can try to use "dhx_blue" menu skin (dhtmlxmenu_dhx_blue.css should be included) - possibly it will be more appropriate for "light" grid