I have a grid that displays correctly in IE9 while not in Chrome and Firefox.
The problem is not the data itself but the column headers of the grid which appears unstyled.
I cannot see any errors happening anywhere not in JS nor in CSS with dev tools in either Chrome or Firefox.
Where is what I see:
IE9 (OK)
Chrome (Not OK - note the unstyled headers)
Firefox (Not OK - note the unstyled headers)
Here is the XML I’m trying to feed to the grid:
<?xml version="1.0" encoding="utf-8"?>
<rows>
<row id="1873db13-0cf3-41f9-bd1b-a495c719f928" status="1">
<cell>0</cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;"><![CDATA[text removed for privacy]]></cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;"><![CDATA[text removed for privacy]]></cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;">text removed for privacy</cell>
<cell style="padding-right:6px; font-family:calibri; font-size:13px;">11.749,69</cell>
<cell style="padding-right:6px; font-family:calibri; font-size:13px;">11.749,69</cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;">2012-10-26</cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;">2012-11-30</cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;"></cell>
<cell title="text removed for privacy" style="padding-left:6px; font-family:calibri; font-size:13px; color:blue;">text removed for privacy</cell>
<cell title="Indtast kontering" style="padding-left:6px; font-family:calibri; font-size:13px; color:blue;"></cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;"><![CDATA[text removed for privacy]]></cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;">text removed for privacy</cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;">1873db13-0cf3-41f9-bd1b-a495c719f928</cell>
<cell style="padding-left:6px; font-family:calibri; font-size:13px;">11749.69</cell>
</row>
</rows>
Here is the code that initializes the grid:
[code]var grid_columns = " ," +
“Afsender,” +
“Modtager,” +
“Fakturanr.,” +
“Fakturatotal,” +
“Beløb,” +
“Fakturadato,” +
“Forfaldsdato,” +
“Sendt,” +
“Konto,” +
“Afd.,” +
“Status,” +
“Fil, " +
" ,” +
" ";
mygrid = new dhtmlXGridObject(‘folderViewGrid’);
mygrid.setImagePath(“dhtmlxGrid/codebase/imgs/”);
mygrid.setHeader(grid_columns);
mygrid.setColumnMinWidth(“30,200,200,100,90,0,100,100,140,100,100,90,0,0,0”);
mygrid.setInitWidthsP(“1,12,12,9.3,9.3,0,9.3,9.3,9.3,9.3,9.3,9.3,0,0,0”);
mygrid.setColAlign(“center,left,left,left,right,left,left,left,left,left,left,left,left,left,right”);
mygrid.setColSorting(“str,str,str,str,int,int,date,date,str,str,str,str,str,str,int”);
mygrid.setColTypes(“ch,ro,ro,ro,ro,ro,ro,ro,ro,ed,ed,ro,ro,ro,ro”);
mygrid.init();
mygrid.setSkin(“dhx_skyblue”);
mygrid.enableMultiselect(false);
mygrid.enableAlterCss(“even_row”, “odd_row”);
mygrid.enableStableSorting(true);[/code]
And here is the div holding the grid:
<div id="folderViewGrid" style="display:none; z-index: 1; width :100%; height:100%;"></div>(the div is obviously visible by the time it is supposed to be)
Here is the document head section:
[code]
.even_row { background-color: #ffffff; }
.odd_row { background-color: #f6f6f6; }
<!-- here sits some of our own js libraries -->
<script src="dhtmlxGrid/codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="dhtmlxGrid/codebase/dhtmlxgrid.js" type="text/javascript"></script>
<script src="dhtmlxGrid/codebase/dhtmlxgridcell.js" type="text/javascript"></script>
<script src="scripts/json2.js" type="text/javascript"></script>[/code]
I cannot tell what is making Chrome and Firefox not wanting to display the column headers correctly.
If anyone has an idea as to what is going on here I sure would be happy to hear about it please.
/Aidal