Start Building Professional
Web Apps Today

Context Menu for Grid in 2.0

I am upgrading our code to use the new 2.0 professional release. I have a context menu for a grid control and I've been having several problems with it. This code does not produce any errors, but when I right click on the grid, no context menu is displayed.

theGridContextMenu = new dhtmlXMenuObject("divGridContextMenu", "standard");
theGridContextMenu.setImagePath("codebase/imgs/");
theGridContextMenu.addNewSibling(null,"insertBefore","Insert new " + itemType + " before", false);
theGridContextMenu.addNewSibling("insertBefore","insertAfter","Insert new " + itemType + " after");
theGridContextMenu.addNewSibling("insertAfter","editRow","Edit " + itemType);
theGridContextMenu.addNewSibling("editRow","deleteRow","Delete " + itemType);
theGridContextMenu.attachEvent("onClick",handleGridContextMenu);
theGridContextMenu.renderAsContextMenu();
theGrid.enableContextMenu(theGridContextMenu);

Some things I found while working with the new menu:

I had to call renderAsContextMenu after the calls to addNewSibling otherwise I got an error on childnodes when addNewSibling was called.

I can't construct the dhtmlXMenuObject with null as the first parameter as shown in one of the grid context menu examples ("Dynamic Context Menu") or no parameters ("Context Menu"). What happens is the text of the four menu entries are displayed near the top of the page. I have to use the id of a div on the page so this does not happen.

I'm trying to get a context menu with four selections all at the same level.

Paul

When using dhtmlxMenu as a context menu for grid, you should not specify first parameter in the constructor. With param menu will use object as a context zone, but grid automatically provides contextual zones for menu. Just use like this:
theGridContextMenu = new dhtmlXMenuObject(null, "standard");
and first you should call:
theGridContextMenu.renderAsContextMenu();
and only then add items into it. First item can be added like this:
theGridContextMenu.addNewChild(theGridContextMenu.topId, ...);
and then:
theGridContextMenu.addNewSibling(....

I made the change to the first call from addNewSibling to addNewChild and changed the parameters as needed.  I no longer get a JavaScript errror but the context menu is not displayed.  The first time I right-click on the grid I briefly see the hourglass cursor but no context menu.  Further right clicks in the grid do not display the context menu and do not show the hourglass cursor.

I discovered that when I first right click on the grid, the text for the four menu items appear at the bottom of the page as four separate lines.  If I click on one of the text lines, the event is caused for that menu item!  So I'm missing something about how to define the context menu.

This is what I have now:

    theGridContextMenu = new dhtmlXMenuObject(null, "standard");
    theGridContextMenu.setImagePath("codebase/imgs/");
    theGridContextMenu.renderAsContextMenu();
    theGridContextMenu.addNewChild(theGridContextMenu.topId,0,"insertBefore","Insert new " + itemType + " before", false);
    theGridContextMenu.addNewSibling("insertBefore","insertAfter","Insert new " + itemType + " after", false);
    theGridContextMenu.addNewSibling("insertAfter","editRow","Edit " + itemType, false);
    theGridContextMenu.addNewSibling("editRow","deleteRow","Delete " + itemType, false);
    theGridContextMenu.attachEvent("onClick",handleGridContextMenu);
    theGrid.enableContextMenu(theGridContextMenu);

Paul

I found I was not including the CSS file for the standard skin.  Adding the link for dhtmlxmenu_standard.css causes the menu to appear. 

Paul