Problem With DHTMxGrid/Context Menu contextID FireFox 3.6.3

Suite and Optimus Suite 5
#1

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.setSkin("light");
		insurancegrid.init();
		insurancegrid.enableLightMouseNavigation(false);
		insurancegrid.loadXML('clientEdit.do?action=getInsuranceXML&cid=<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.renderAsContextMenu();
		menu.addContextZone("insuranceGrid");
    	menu.setIconsPath("dhtmlx_build91111/dhtmlxMenu/imgs/");
		menu.addNewChild(menu.topId, 0, "delete", "Delete", false );
    	menu.addNewChild(menu.topId, 1, "new", "Add New Provider", false);
		insurancegrid.enableContextMenu(menu);

    	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 %>') {
					insurancegrid.deleteRow(rid);
   	 			}
   	 		}
		});
#2

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:

docs.dhtmlx.com/doku.php?id=dhtm … components

#3

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.

#4

Problem can be caused by the next line

menu.addContextZone(“insuranceGrid”);

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.

#5

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