Problem With DHTMxGrid/Context Menu contextID FireFox 3.6.3

I found a problem with the DHTMLxGrid/Context Menu, which I am testing in IE8 and Mozilla FireFox 3.6.3; the problem only occurs in Mozilla FireFox 3.6.3. The problem occurs when I try to obtain the grid rowid clicked on in order to bring up the context menu using grid.contextID.

In FireFox I get an undefined value for this variable, while in IE, I get the row/cell ID as expected.

Here are my includes:

		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxWindows/dhtmlxwindows.css">
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxGrid/dhtmlxgrid.css">
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxGrid/skins/dhtmlxgrid_dhx_blue.css" />
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxCombo/dhtmlxcombo.css" />
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxMenu/skins/dhtmlxmenu_dhx_skyblue.css">
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxGrid/ext/dhtmlxgrid_filter.css" />
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxGrid/dhtmlxgrid_skins.css">
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxWindows/skins/dhtmlxwindows_modern_black.css">
		<link rel="stylesheet" type="text/css" href="dhtmlx_build91111/dhtmlxTabbar/dhtmlxtabbar.css" />
		<link href="parts/defaultpage.css" rel="stylesheet" title="default" type="text/css" />
		<script type="text/javascript" src="js/error.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxGrid/dhtmlxcommon.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxGrid/dhtmlxgrid.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxGrid/dhtmlxgridcell.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxGrid/excells/dhtmlxgrid_excell_grid.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxGrid/excells/dhtmlxgrid_excell_combo.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxGrid/ext/dhtmlxgrid_form.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxWindows/dhtmlxwindows.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxCombo/dhtmlxcombo.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxMenu/dhtmlxmenu.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxMenu/ext/dhtmlxmenu_ext.js"></script>
		<script type="text/javascript" src="dhtmlx_build91111/dhtmlxTabbar/dhtmlxtabbar.js"></script>

Here is the code which generates the grid with the right-click context menu:

		var insurancegrid = new dhtmlXGridObject('insuranceGrid');
        	newId = 0;	// sentinal for new rows
		insurancegrid.imgURL		= "dhtmlx_build91111/imgs/"; 
		insurancegrid.loadXML('<bean:write name="clientEditForm" property="clientId"/>');
		insurancegrid.attachEvent("onEditCell", function(stage,rId,cInd,nValue,oValue){
			if(cInd == 0 && oValue == '<%= ClientEditAction.BLANK_PROVIDER_STRING %>') {
				console.debug('blank provider row used, creating new row');
				this.addRow("new_" + newId++ ,"<%= ClientEditAction.BLANK_PROVIDER_STRING %>,,");
			return nValue;
		var menu = new dhtmlXMenuObject();
		menu.addNewChild(menu.topId, 0, "delete", "Delete", false );
    	menu.addNewChild(menu.topId, 1, "new", "Add New Provider", false);

    	menu.attachEvent("onClick", function(id, zoneId, casState) {
    		var data = insurancegrid.contextID.split("_");

    		rid = data[0];
   	 		// delete option selected
   	 		if(id == 'delete') {
	   	 		//var rid = insurancegrid.getSelectedRowId();
	   	 		alert("current row selection is: " + rid);

   	 			// don't allow the user to delete the "blank" row
   	 			if(insurancegrid.cells(rid, 0).getValue() != '<%= ClientEditAction.BLANK_PROVIDER_STRING %>') {

I would also like to add that I am using Struts/JSP, so there are places in the code where I am referring to “Action” files such as “<%= ClientEditAction.BLANK_PROVIDER_STRING %>”; this just replaces with a static string.

Another important resource is this link, where they explain how to use the contextID to interface the two modules for this purpose: … components

I’ve also verified that this contextID doesn’t work in the Google Chrome browser. I am using version 5.0.375.29 beta of Chrome.

Problem can be caused by the next line


It is not necessary for default logic ( enableContextMenu will do all handling automatically ) , and creates new context zone, for which contextID value will not be set. ( because this area is not linked to the grid )

Removing that command , must resolve the issue.

Thanks for your assistance, this solves the issue of using the contextID to retrieve the row ID in FireFox and Safari.