Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Carsten Haerle on Aug 04, 2009 04:35
open dhtmlx forum
No DHTMLXGRID Headers in IE8

We use dhtmlxgrid_1.6_pro.js and have the problem that the text of the header row is not displayed in IE8. It is displayed in other browsers and IE8 compatibility mode also.

I analyzed the situtation so far, that the inner table consists of two columns, the second of which has a width of 100%. The first column has no width attribute, so that second column seems to squeeze the first column to width zero. When I replace "100%" with something else, I can see the headers. See inner table code below.

Is there a fix for this?

<TABLE style="WIDTH: 100%" class="xhdr" cellSpacing="0" cellPadding="0">
<TR>
<TD >
<TABLE style="BORDER-BOTTOM: gray 0px solid; BORDER-LEFT: gray 0px solid; TABLE-LAYOUT: fixed; BORDER-TOP: gray 0px solid; BORDER-RIGHT: gray 0px solid" class="hdr" cellSpacing="0" cellPadding="0" width="100%">
<TBODY>
<TR style="POSITION: absolute">
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="0">
</TH>
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="1">
</TH>
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="2">
</TH>
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="3">
</TH>
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="4">
</TH>
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="5">
</TH>
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="6">
</TH>
<TH style="WIDTH: 100px; HEIGHT: 0px" _cellIndex="7">
</TH>
</TR>
<TR>
<TD _cellIndex="0" _cellIndexS="0">
<DIV class="hdrcell" _extended>
Buchungszeichen
</DIV>
</TD>
<TD _cellIndex="1" _cellIndexS="1">
<DIV class="hdrcell" _extended>
Name
</DIV>
</TD>
<TD _cellIndex="2" _cellIndexS="2">
<DIV class="hdrcell" _extended>
PLZ
</DIV>
</TD>
<TD _cellIndex="3" _cellIndexS="3">
<DIV class="hdrcell" _extended>
Ort
</DIV>
</TD>
<TD _cellIndex="4" _cellIndexS="4">
<DIV class="hdrcell" _extended>
Straße
</DIV>
</TD>
<TD _cellIndex="5" _cellIndexS="5">
<DIV class="hdrcell" _extended>
Postfach
</DIV>
</TD>
<TD _cellIndex="6" _cellIndexS="6">
<DIV class="hdrcell" _extended>
Land
</DIV>
</TD>
<TD _cellIndex="7" _cellIndexS="7">
<DIV class="hdrcell" _extended>
Ortsteil
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD style="WIDTH: 100%">
      
</TD>
</TR>
</TABLE>
Answer posted by dhxSupport on Aug 04, 2009 05:49
Unfortunately we cannot reproduce this issue locally. Could you please provide sample of code how are you initialize grid?
Answer posted by Carsten Haerle on Aug 11, 2009 03:32

We create the element with the following code:

<div id="tlbAuswahl" style="position:relative; width:100%"></div>
<script type="text/javascript">
loTlbAuswahl  = new listObject('tlbAuswahl');
loTlbAuswahl.loadXML("servlet/DZListViewServlet?webContext=9791&name=tlbAuswahl", function(){loTlbAuswahl.changePage(1);loTlbAuswahl.enableStableSorting(true);});
</script>

The XML transferred by the Servlet contains serverl columns with absolute width attributes, e.g. with total width 960px.

The generated rows table gets an inline style of "width: 960":

<table class="obj row20px" style="width: 960px; table-layout: fixed;" cellSpacing="0" cellPadding="0" .....

The header table however has the attribute "width=100%". When I change this to "width=960", I can see the headers (although they are not perfectly aligned).

 

Answer posted by Carsten Haerle on Aug 11, 2009 03:34

Here is the transfered XML

<?xml version='1.0' encoding='iso-8859-1'?>
<rows>
 <head>
  <beforeInit>
   <call command="enableAutoHeight">
    <param>true</param>
   </call>
   <call command="enableRowsHover">
    <param>true</param>
    <param>row_hover</param>
   </call>
   <call command="attachEvent">
    <param>onRowDblClicked</param>
    <param>onDoubleClick</param>
   </call>
   <call command="attachEvent">
    <param>onRowSelect</param>
    <param>onRowClick</param>
   </call>
   <call command="enableMultiselect">
    <param>false</param>
   </call>
   <call command="enableColumnMove">
    <param>true</param>
   </call>
   <call command="setPagingTemplates">
    <param>
     <![CDATA[[prevpages:<: ] [currentpages: | ] [nextpages:>:] ]]></param>
    <param>[from] - [to] von [total]</param>
   </call>
   <call command="attachEvent">
    <param>onXLE</param>
    <param>loadColList</param>
   </call>
   <call command="attachEvent">
    <param>onAfterCMove</param>
    <param>reloadColList</param>
   </call>
  </beforeInit>
  <afterInit/>
  <column width="100" align="left" type="ro" sort="str_notcase" id="buchungszeichen">Buchungszeichen</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="nameListe">Name</column>
  <column width="60" align="left" type="ro" sort="str_notcase" id="plzPrint">PLZ</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="ort">Ort</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="strasseHausnummerHausnummerZusatzPrint">Straße</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="ortsteil">Ortsteil</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="postfachPrint">Postfach</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="landPrint">Land</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="printGrundstueckStrasse">Grundstück</column>
  <column width="100" align="left" type="ro" sort="str_notcase" id="printGrundstueckOrt">PLZ/ Ort</column>
 </head>
 <row id="WebFormVirtualListView.tlbAuswahl.doubleClicked:.doubleClicked:.1" selected="true">
  <cell>5.8888.100001.3</cell>
  <cell>Wurst, Hans</cell>
  <cell>01234</cell>
  <cell>Leupzig</cell>
  <cell>Weingartenstr 12</cell>
  <cell/>
  <cell/>
  <cell>Deutschland</cell>
  <cell>Wagenburgplatz 12</cell>
  <cell>70184 Teststadt</cell>
 </row>
</rows>

Answer posted by Support on Aug 11, 2009 04:48
>>the text of the header row is not displayed in IE8
Please check 
http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&page=1&q=9536&ssr=yes&s=ie8%20header