Can't make contextMenu work on dhxGrid

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?

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

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)


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”);

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.