DhtmlxGrid Headers become invisible on hovering in grid(IE8)

Hi,
I am using Dhtmlx professional ed. V2.0 & the problem that I am facing is that whenever I am taking the cursor inside the grid, the borders of the headers become invisible…This issue is only in IE8 (not in IE6 & not checked in IE7), it is not there in FF or chrome.

I know that upgrading the library will resolve this issue, but right now I can’t upgrade my Dhtmlx library. So is there a way where by adding some piece of code, I can make it work. :question:

Thanks for the help in advance…

Please open ticket at support.dhtmlx.com/ and provide complete demo of the issue and we’ll try to provide fix for 2.0 version

Hi,
My support has expired and I didn’t got the license as I got the DhtmlxSuite product in source code form. So I can’t generate the support ticket.

I am adding the code used for constructing DhtmlxGrid below:

[i]

.dhx_header_cmenu{ background-color:#ffffff; border:2px outset silver; z-index:2; } .dhx_header_cmenu_item{ white-space:nowrap; }

<%
// getting all the parameters from the request object

String countItem = request.getParameter(“countItem”);
String colTypes = request.getParameter(“colTypes”);
String colWidths = request.getParameter(“colWidths”);
String colAlign = request.getParameter(“colAlign”);
String colHeader = request.getParameter(“colHeader”);
String colSorting = request.getParameter(“colSorting”);
String xml = request.getParameter(“xml”);
String nonEditableColumnsId = request.getParameter(“nonEditableColumnsId”);
String header = request.getParameter(“header”);
String groupbycolids = request.getParameter(“groupbycolids”);
String paginationURL = request.getParameter(“paginationURL”);
int count = Integer.parseInt(request.getParameter(“count”));
String domain = request.getParameter(“domain”);
boolean autoRefresh = new Boolean(request.getParameter(“autoRefresh”)).booleanValue();;
String multiRowSelection = “false”; // default should be false
if(request.getParameter(“multiRowSelection”) != null &&
request.getParameter(“multiRowSelection”).equals(“true”)) {
multiRowSelection = “true”;
}
String customGroupFormater = request.getParameter(“customGroupFormater”);
String tooltips = request.getParameter(“tooltips”);
boolean rowsperpage = “true”.equals(request.getParameter(“rowsperpage”));
String RPPT = request.getParameter(“rowsperpage”);
boolean setInnerHtml = (colTypes.contains(“coro”) || colTypes.contains(“combo”) )? false : true;

%>

	<tr id="toolbar" style="position: relative; bg-color: #E3E3E3'">
		<td colspan="2">
			<jsp:include flush="true" page="ActionManager.jsp">
				<jsp:param name="select" value="true"/>
				<jsp:param name="ShowSubActions" value="true"/>
				<jsp:param name="Action" value="<%=header%>"/>
				<jsp:param name ="groupbycolids" value="<%=groupbycolids%>"/>
				<jsp:param name="actionHandler" value="onButtonClick" />
				<jsp:param name="domain" value="<%=domain%>"/>
				<jsp:param name="rowsperpage" value="<%=RPPT%>"/>
			</jsp:include>
		</td>
	</tr>
	<tr id="pagination_header" >
		<td colspan="2">
		<% 
			int startCount=1;
			StringBuilder sbopt = new StringBuilder("");
		 	if(paginationURL==null){ 
		 		if(count == 0) {
		 			startCount=0;
				}
		 		//what is this doing??
			sbopt.append("<p class='left_img'>Listing <span id='startCount'>" + startCount + "</span> - <span id='endCount'>" + count + "</span> of <span id='totalCount'>" + count + "</span> " + countItem + "</p>");
			}else {}
			if(groupbycolids != null){
				sbopt.append("<select class='right_img' onchange=\\\"onButtonClick('sel','')\\\" id='user_sel'>");
				sbopt.append("<option value='GroupBy'>Group By</option>");
				for(String colId: groupbycolids.split(",")){
					sbopt.append("<option value='"+colId+"'>"+colId+"</option>");
				}
				sbopt.append("</select>");
				
				//sbopt.append("<a href=\\\"javascript:onButtonClick('printView','NotUsed')\\\" class='right_img'>Printable View</a>");
			}
			sbopt.append("<div id='exportoptions'></div>");
			if(rowsperpage) {
				sbopt.append("<div id='rowsperpage'></div>");
			}
			
		%>
		<script type="text/javascript">
		function initSubToolBar() {
			//document.getElementById("toolbar_zone").innerHTML += "<%=sbopt.toString()%>";
			//initExportOptions("", "mygrid");		
		}
		</script>	
		</td>
	</tr>
	<%
		String filterHeight = request.getParameter("filterHeight");
		if(filterHeight != null) {
	%>   <tr><td colspan="2" style='height:<%=filterHeight%>'><div id='_filter'></div></td></tr>
	<%  } %>
	<tr align="center" valign="top" id="grid"  >
		<td align="center" colspan="2" >
			<div id="gridbox" width="100%" height="457px" style="background-color:white;overflow:hidden; "></div>
		</td>
	</tr>
	<tr valign="top" id="pagination_footer">
	     	<td align="right">
				<%if(paginationURL!=null){ %>
			<jsp:useBean id="Pagination"
class="com.tejas.webfwk.workers.bean.PaginationBean" scope="request" />
					<jsp:include flush="true" page="/jsp/AjaxPagination.jsp">
						<jsp:param name="parentPage" value="<%=paginationURL%>"  />
					</jsp:include>
					<%} %>
				</td>					
	</tr>
	<%  if( multiRowSelection.equalsIgnoreCase("true")) { %>
	<tr valign="bottom">
		<td align="left" class="textDescItalics" colspan="2">
			** <span class="errmsg">NOTE:</span> Use Ctrl + mouse click for multiple row selection.
		</td>
	</tr>
	<% } %>

[/i]

I am adding two snapshots (one with cursor inside grid & one outside)