Start Building Professional
Web Apps Today

Gridx

I am using Girdx with header having textbox and combobox. My application needs to change data in the grid according to changes done in a combobox. I am able to fetch the data with changes in combobox accordingly. But, when i load the data second time with changes in combobox my header display but the textboxes and combobox's does not apper. I am attaching my javascript function for ref:

function doOnLoad(project){
onLoad();
if( i == true)
{
    i = false ;
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setSkin("light");
    mygrid.init();
}
mygrid.attachHeader("<div id='id_flt'></div>,<div id='title_flt'></div>,#rspan,<div id='location_flt'></div>,<div id='level_flt'></div>,<div id='status_flt'></div>,#rspan,#rspan,#rspan");
mygrid.clearAll();
mygrid.loadXML("http://localhost:8080/MyProject/getGridRecords.jsp?project="+project, function(){
document.getElementById("id_flt").appendChild(document.getElementById("id_flt_box").childNodes[0])
document.getElementById("title_flt").appendChild(document.getElementById("title_flt_box").childNodes[0])
locFlt = document.getElementById("location_flt").appendChild(document.getElementById("location_flt_box").childNodes[0]);
levelFlt = document.getElementById("level_flt").appendChild(document.getElementById("level_flt_box").childNodes[0]);
statusFlt = document.getElementById("status_flt").appendChild(document.getElementById("status_flt_box").childNodes[0]);
});

I am calling the same functin with differnt project names to get different records displayed in my grid.

When you are loading grid first time, you are taking elements from id_flt_box ,  but when grid loaded second time, this container doesn't contain any content ( already was moved to the grid )

To resolve problem you can change your code as

if( i == true) 
{ 
  i = false ; 
  mygrid = new dhtmlXGridObject('gridbox'); 
  mygrid.setImagePath("codebase/imgs/"); 
  mygrid.setSkin("light"); 
  mygrid.init(); 
} else {
var cont = document.getElementById("id_flt_box");
    cont.appendChild(document.getElementById("id_flt").childNodes[0]); //move elements back from header, so they can be reused
    cont.appendChild(document.getElementById("title_flt").childNodes[0])
}


or , as second solution, reload only data part of grid, not both data and header structure, in such case existing headers will be preserved