Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Paul K on Aug 10, 2008 22:49
open dhtmlx forum
Changing Combo in Header

I have a dhtmlXGrid control that I want to switch between different sets of data using a dhmtlXCombo control in the header of the grid control. The problem is that I need to change the header with the different selections in the combo and I'm getting script errors.

In the header for the grid, I define some text and a div tag to hold the combo. This works when the page is first displayed:

theGrid.setHeader("<img src='./codebase/imgs/" + iconFileName + "'>   Text that changes with selection  <div id='grid_combo' style='width:160px; height:15px;'></div>,Description");
theGrid.attachHeader("#text_filter");
:::::::::::::::::::::::::::::
theGridCombo = new dhtmlXCombo("grid_combo","selectType",160,"image");

I see the combo control in the header for the grid control and the values I expect to see are in the list.

I attach a function to the onChange event for the combo control. When the selection changes I need to change the text in the header of the grid control as well as the data in the grid. So far I haven't been able to do so.

I use the clearAll function followed by a call to the constructor for the combo control on the grid but I can't change the header text with the div tag in it sucessfully. I get an "Object Required" error in dhmtlxcombo.js when the parent object is accessed in the constructor as if the div tag wasn't found.

Paul


Answer posted by Support on Aug 11, 2008 02:17
>>I use the clearAll function followed by
If you are using 
      grid.clearAll(true); - it will destroy grid headers structure and it will be reconstructed only after new configuration loaded ( from XML or by grid.init() ) till that time, header is not exists as HTML element, and its content can't be reached by any DOM commands.

Actually, if you need to change only text in header, it may be done without full grid reloading, why not use something similar to next. 
theGrid.setHeader("<span id="replace_part"><img src='./codebase/imgs/" + iconFileName + "'> Text that changes with selection </span><div id='grid_combo' style='width:160px; height:15px;'></div

In such case you can change innerHTML of #replace_part container without grid reloading.