Start Building Professional
Web Apps Today

strange dhtmlxGrid dynamic creation exception:this.hdr.row.0 is null or not an object

dear,

I use dhtmlxGrid 1.5 in IE7. Because of custom requirement, I need to create dhtmlxGrid dyanmically and encoutered a strange problem :this.hdr.row.0 is null or not an object. My example code is as follow:

<div id="test"></div>
<script type="text/javascript">

$("test").innerHTML+='<div id="gridbox" width="400px" height="250px" style="background-color:white;overflow:hidden"></div>';

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("/CMSMaster/dhtmlxgrid/imgs/");
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("200,*")
mygrid.setColAlign("right,left")
mygrid.setColTypes("ro,ed");
mygrid.setColSorting("int,str")
mygrid.enableAutoHeight(true,400);
mygrid.init();
mygrid.loadXML("grid.xml");
    
    
$("test").innerHTML+='<div id="gridbox2" width="400px" height="250px" style="background-color:white;overflow:hidden"></div>';    
mygrid2 = new dhtmlXGridObject('gridbox2');
mygrid2.setImagePath("/CMSMaster/dhtmlxgrid/imgs/");
mygrid2.setHeader("Column A, Column B");
mygrid2.setInitWidths("200,*")
mygrid2.setColAlign("right,left")
mygrid2.setColTypes("ro,ed");
mygrid2.setColSorting("int,str")
mygrid2.enableAutoHeight(true,400);
mygrid2.init();
mygrid2.loadXML("grid.xml");

</script>

when the scripts is running, the exception is thowed: "this.hdr.row.0 is null or not an object" in funtion _prepareRow() code segment "for(var i=0;i<this.hdr.rows[0].cells.length;i++)".

But if I insert a Settimeout() function to delay to create the second grid object dynamically, Above exception is disappeared and the two grid can display, but the first grid can not work correctly, such as edit,sort. the example code is as follow:

<div id="test"></div>

<script type="text/javascript">

$("test").innerHTML+='<div id="gridbox" width="400px" height="250px" style="background-color:white;overflow:hidden"></div>';

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("/CMSMaster/dhtmlxgrid/imgs/");
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("200,*")
mygrid.setColAlign("right,left")
mygrid.setColTypes("ro,ed");
mygrid.setColSorting("int,str")
mygrid.enableAutoHeight(true,400);
mygrid.init();
mygrid.loadXML("grid.xml");

setTimeout(createSecondGrid,5);

function createSecondGrid()
{
$("test").innerHTML+='<div id="gridbox2" width="400px" height="250px" style="background-color:white;overflow:hidden"></div>';    
mygrid2 = new dhtmlXGridObject('gridbox2');
mygrid2.setImagePath("/CMSMaster/dhtmlxgrid/imgs/");
mygrid2.setHeader("Column A, Column B");
mygrid2.setInitWidths("200,*")
mygrid2.setColAlign("right,left")
mygrid2.setColTypes("ro,ed");
mygrid2.setColSorting("int,str")
mygrid2.enableAutoHeight(true,400);
mygrid2.init();
mygrid2.loadXML("grid.xml");
}
</script>

This is why, it let me exhausted, please give me a hand.

Thanks!

>>a strange problem :this.hdr.row.0 is null or not an object
such can occur if you are using data related API while grid.init was not called

In your case , problem related to the 

$("test").innerHTML+='

When you are using += operation against innerHTML, browser reset all existing html elements, and all old DOM element pointers become invalid. 

You can change the code to DOM friendly way

var div=document.createElement("DIV");
div.id="gridbox2";
div.style.cssText="width:400px;height:250px;background-color:white;overflow:hidden;";
$("test").appendChild(div);