Start Building Professional
Web Apps Today

Data in grid is there but not visible

I have a grid where the xml data is being loaded correctly but it is not visible because the height of the data area div is 0. Can you give me any leads as to what might cause this? Other grids attached to the same layout work fine.

This is the generated HTML for the data area of the grid. Note the height of the div is .

<div style="overflow: auto; width: 100%; height: 0px;" class="objbox">
<table cellspacing="0" cellpadding="0" style="width: 1170px; table-layout: fixed;" class="obj row20px">
<tbody>
<tr style="height: auto;">
<th style="height: 0px; width: 75px;"/>
<th style="height: 0px; width: 50px;"/>
<th style="height: 0px; width: 970px;"/>
<th style="height: 0px; width: 75px;"/>
</tr>
<tr class="ev_light">
<td align="left" valign=""> </td>
<td align="left" valign="">Comment</td>
<td align="left" valign="">test sa 1 client 1</td>
<td align="left" valign=""> </td>
</tr>
<tr class="odd_light">
<td align="left" valign="">16-05-2009</td>
<td align="left" valign="">Comment</td>
<td align="left" valign="">test2</td>
<td align="left" valign=""> </td>
</tr>
<tr class="ev_light">
<td align="left" valign="">18-05-2009</td>
<td align="left" valign="">Comment</td>
<td align="left" valign="">test</td>
<td align="left" valign=""> </td>
</tr>
</tbody>
</table>
</div>

Here is the XML that is loading into the grid:

<?xml version="1.0" encoding="iso-8859-1"?>
<rows total_count="3" pos="0">
<row id="7">
<cell /><cell>
<![CDATA[Comment]]></cell>
<cell><![CDATA[test
sa 1 client 1]]></cell>
<cell />
</row>
<row id="2">
<cell>16-05-2009</cell>
<cell><![CDATA[Comment]]></cell>
<cell><![CDATA[test2]]></cell>
<cell />
</row>
<row id="6">
<cell>18-05-2009</cell>
<cell><![CDATA[Comment]]></cell>
<cell><![CDATA[test]]></cell>
<cell />
</row>
</rows>

I have configuration files and a generic function to initialise my grids. In this case the configuration contains:

'grid' => array(
'header' => array(
'row_1' => 'Date,Type,Description,Related To',
'row_2' => '#numeric_filter,#select_filter,#text_filter,#text_filter'
),
'widths' => '75,50,*,75',
'col_align' => 'left,left,left,left',
'col_sorting' => 'date,str,str,str',
),

The grid initialisation function contains (mix of php & javascript):

gridsChild['child_tab_".$tab['identifier']."'] = tabbarChild.cells('child_tab_".$tab['identifier']."').attachGrid();
gridsChild['child_tab_".$tab['identifier']."'].setImagePath(dhtmlx_codebase_path+'imgs/');
gridsChild['child_tab_".$tab['identifier']."'].setSkin('light');
gridsChild['child_tab_".$tab['identifier']."'].setHeader('".$tab['grid']['header']['row_1']."');
gridsChild['child_tab_".$tab['identifier']."'].attachHeader('".$tab['grid']['header']['row_2']."');
gridsChild['child_tab_".$tab['identifier']."'].setInitWidths('".$tab['grid']['widths']."');
gridsChild['child_tab_".$tab['identifier']."'].setColAlign('".$tab['grid']['col_align']."');
gridsChild['child_tab_".$tab['identifier']."'].setColSorting('".$tab['grid']['col_sorting']."');
gridsChild['child_tab_".$tab['identifier']."'].init();
gridsChild['child_tab_".$tab['identifier']."'].enableSmartRendering(true, 50);
gridsChild['child_tab_".$tab['identifier']."'].setUserData('','data_source','".url_for($tab['module']."/getMainListXML")."/s_".$tab['parent']."_id/');

The grid is loaded when the containing tab is clicked as follows:

function reloadTab(id){
if (gridsChild[id] != undefined){
data_source = gridsChild[id].getUserData('','data_source');
if (current_parent_id != undefined){
var uid="/uid/"+(new Date()).valueOf();
gridsChild[id].clearAll();
gridsChild[id].loadXML(data_source+current_parent_id+uid);
// gridsChild[id].clearAndLoad(data_source+current_parent_id);
gridsChild[id].setUserData('','data_source',data_source);
}else{
gridsChild[id].clearAll();
gridsChild[id].setUserData('','data_source',data_source);
}
}
}

Again, everything seems to load correctly it's just that the data rows aren't actually visible. What causes the height to be set to 0?

>>What causes the height to be set to 0?
You have set height 0px to the grid's container:
<div style="overflow: auto; width: 100%; height: 0px;" class="objbox">

That's why grid rows are not visible. 

Thanks for the answer but I know the DIV height is set to 0 and that this is the reason that I can;t see the data rows. What I don't know is why the DIV height is set to 0.
I did find a work around though.
This is how I initiallise the tabbar:

  if (tabbarChild == undefined){
    tabbarChild = dhxLayoutRight.cells("b").attachTabbar();
    tabbarChild.setImagePath(dhtmlx_codebase_path+"imgs/");
    tabbarChild.setSkinColors("#FCFBFC","#F4F3EE");     
    tabbarChild.enableAutoReSize(true); 
    tabbarChild.enableAutoSize(true, true);
    tabbarChild.setHrefMode("ajax-html"); 
    tabbarChild.attachEvent("onSelect", function(id,last_id){
      loadTab(id);
      return true;
    });
  }

I changed the AutoSize method to:
    tabbarChild.enableAutoSize(true, false);
and now it works.

I would have thought that enabling autoheight would have caused the tabbar to expand to the size of the attached grid. Instead disabling autoheight seems to do it. Is this a bug or am I missing something?