Can't make contextMenu work on dhxGrid

Suite and Optimus Suite 5
#1

Hi,

I’m having some troubles with attaching a contextMenu to a grid object. I looked into the documentation, samples and even searched for previous answers in the forum, but i’m unable to fix my problem.

Here is my js code :

function contextMenu_test(){
    //layout
  var tmpLayout = new dhtmlXLayoutObject($("#MAIN_CONTAINER").get(0),"1C");
  tmpLayout.items[0].hideHeader();
         
  //Grid
  var grid = tmpLayout.items[0].attachGrid();
  grid.setImagePath("kit/dhtmlx3/imgs/");
  grid.setHeader("Cell 0,Cell 1,Cell 2");
  grid.setInitWidths("*,*,*");
  grid.init(); 
  for(var i=0;i<10;i++){
    grid.addRow(i,["ligne_"+i+"#cell_0","ligne_"+i+"#cell_1","ligne_"+i+"#cell_2"]);
  }
            
  //Menu
  var menu = new dhtmlXMenuObject();
  menu.setIconsPath("kit/dhtmlx3/imgs/");
  menu.addNewSibling(null,"menu_0","Option 0");
  menu.addNewSibling("menu_0","menu_1","Option 1");
  menu.addNewSibling("menu_1","menu_2","Option 2");
  menu.renderAsContextMenu();
  grid.enableContextMenu(menu);
}

And here is the html page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script language="Javascript" src="script.js"></script><li></li>
  <script language="Javascript" src="kit/jQuery1.5.2/jquery-1.5.2.min.js"></script>
  <script language="Javascript" src="kit/dhtmlx3/dhtmlx.js"></script>
  <link type='text/css' rel='stylesheet' href='kit/dhtmlx3/dhtmlx.css' />
  <title>Test context menu</title>
  </head>
  <body onload="new contextMenu_test()">
    <div id="MAIN_CONTAINER" style='width:50%;height:100%;position:relative;margin-left:25%;'>
    </div>
  </body>
</html>

Nothing happens when I right click into my grid. Dis I forget something essential?

#2

The part that attachs menu to the grid is correct
Try to load contextmenu configuration from xml, instead of creating it through js code.

#3

Hi,

Here is my code after modification :

function contextMenu_test(){
    //layout
  var tmpLayout = new dhtmlXLayoutObject($("#MAIN_CONTAINER").get(0),"1C");
  tmpLayout.items[0].hideHeader();
         
  //Grid
  var grid = tmpLayout.items[0].attachGrid();
  grid.setImagePath("kit/dhtmlx3/imgs/");
  grid.setHeader("Cell 0,Cell 1,Cell 2");
  grid.setInitWidths("*,*,*");
  grid.init(); 
  for(var i=0;i<10;i++){
    grid.addRow(i,["ligne_"+i+"#cell_0","ligne_"+i+"#cell_1","ligne_"+i+"#cell_2"]);
  }
            
  //Menu
  var menu = new dhtmlXMenuObject();
  menu.setIconsPath("kit/dhtmlx3/imgs/");
  menu.renderAsContextMenu();
  /* Solution 1 : js
  menu.addNewSibling(null,"menu_0","Option 0");
  menu.addNewSibling("menu_0","menu_1","Option 1");
  menu.addNewSibling("menu_1","menu_2","Option 2");
  //*/
  /* Solution 2 : XML String
  var tmpStringMenu = "<menu><item id='menu_0' text='Option 0'/><item id='menu_1' text='Option 1'/><item id='menu_2' text='Option 2'/></menu>";
  menu.loadXMLString(tmpStringMenu);
  //*/
  //Solution 3 : XML file
  menu.loadXML("xml_file.xml");
  //*/
  
  menu.attachEvent("onClick",function(pId){alert(pId);});
  grid.enableContextMenu(menu);
}

The “onClick” events works, but there is clearly something wrong with the menu (see attached file)

contextMenu.png697×422 6.04 KB

#4

Try to change the menu constructor like next

var menu = new dhtmlXMenuObject(null, “dhx_skyblue”);

where second parameters must be a name of the used skin ( you are using dhtmlx.css from some skin pack, right ? )

for web
var menu = new dhtmlXMenuObject(null, “dhx_web”);

for terrace
var menu = new dhtmlXMenuObject(null, “dhx_terrace”);

#5

Yep, it works with dhx_web, the skin loaded. Still, it’s weird how the menu doesn’t load the default skin as tabbars or grids do.

Thanks a lot.