#cspan and #rspan optical problem

Suite and Optimus Suite 5
#1

Hello,

i’ve a grid with a header with setHeader() init

mygrid.setHeader("A,B,C,D1<br/>D2<br/>D3,#cspan,E1<br/>E2</br/>E3,#cspan,F1<br/>F2<br/>F3,#span", null, 
    		       ["text-align:center;","text-align:center","text-align:center","text-align:center",
    		        "text-align:center","text-align:center","text-align:center","text-align:center"]);

After this i attach a (filter) header with

mygrid.attachHeader("#numeric_filter,#text_filter,#rspan,#rspan,#rspan,#rspan");

The first three rows are ok but in front of the fourth, fifth and sixth column (here D,E and F) i get empty entries.
This doesn’t work too

mygrid.attachHeader("#numeric_filter,#text_filter,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan");

Complete code:

mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.enableColSpan(false);
/* Alternative try this */
/*    
mygrid.enableColSpan(true);
*/
mygrid.setHeader("A,B,C,D1<br/>D2<br/>D3,#cspan,E1<br/>E2<br/>E3,#cspan,F1<br/>F2<br/>F3,#cspan", null, 
	                ["text-align:center;","text-align:center","text-align:center",
	                 "text-align:center", 
	                 "text-align:center", 
	                 "text-align:center"]);
/* Alternative try this */
/*
mygrid.setHeader("A,B,C,D1&nbsp;D2&nbsp;D3,#cspan,E1&nbsp;E2&nbsp;E3,#cspan,F1&nbsp;F2&nbsp;F3,#cspan", null, 
                    ["text-align:center;","text-align:center","text-align:center",
                     "text-align:center", 
                     "text-align:center", 
                     "text-align:center" ]);
*/
mygrid.attachHeader("#numeric_filter,#text_filter,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan,#rspan");

mygrid.setImagePath('{path}');
mygrid.setSkin("modern");
mygrid.setColTypes("ro,ro,ch,ch,ed,ch,ed,ch,ed");
mygrid.setColAlign("left,left,center,right,left,right,left,right,left");
mygrid.setColumnIds("a,b,c,d,e,f,g,h,i");
mygrid.enableTooltips("false,false,false,false,false,false,false,false");
mygrid.enableMultiselect(true);
mygrid.enableRowsHover(true,'grid_hover');
mygrid.enableUndoRedo();
mygrid.enableAutoHeight(true);
mygrid.setInitWidths("*,*,*,*,*,*,*,*");
mygrid.init();

With this?

Sincerely, Carsten

The generated html code:

<tbody>
<tr style="height: auto;">
  <th style="height: 0px;"></th>
  <th style="height: 0px;"></th>
  <th style="height: 0px;"></th>
  <th style="height: 0px;" rowspan="2"></th>
  <th style="height: 0px;"></th>
  <th style="height: 0px;" rowspan="2"></th>
  <th style="height: 0px;"></th>
  <th style="height: 0px;"></th>
  <th style="height: 0px;"></th>
</tr>
<tr>
  <td style="text-align: center;">
    <div class="hdrcell">A</div>
  </td>
  <td style="text-align: center;">
    <div class="hdrcell">B</div>
  </td>
  <td style="text-align: center;" rowspan="2">
    <div class="hdrcell">C</div>
  </td>
  <td style="text-align: center; cursor: default;" colspan="2" rowspan="2">
    <div class="hdrcell">D1<br/>D2<br/>D3</div>
  </td>
  <td style="text-align: center;" colspan="2">
      <div class="hdrcell">E1<br/>E2<br/>E3</div>
  </td>
  <td style="text-align: center;" colspan="2">
    <div class="hdrcell">F1<br/>F2<br/>F3</div>
  </td>
</tr>
<tr>
  <td style="cursor: default;">
    <div class="hdrcell filter"><input type="text" style="width: 90%; font-size: 8pt; font-family: Tahoma; -moz-user-select: text;"></div>
  </td>
  <td><div class="hdrcell filter"><input type="text" style="width: 90%; font-size: 8pt; font-family: Tahoma; -moz-user-select: text;"></div>
  </td>
</tr>
#2

There is now way to apply #cspan and #rspan to the same cell in header as well as in grid body.
In your code you merge 4th cell in grid header with 3th cell, and at the same time merge 3th and 4th cells in 2nd row with cells above. Such type of merging is not supported in dhtmlxGrid.

#3

What a pity!
In plain html we had liquidate that before we changed to dhtmlxgrid. And we need to visual some columns as one column.