Start Building Professional
Web Apps Today

Rowspan with splitAt functionality

Hi,


We are making use of
attachHeader(#rspan, One, #rspan);

We are having a grid with three columns. First column is locked. The rowspan for the header is 2. When we try to implement the above mentioned functionality we are unable to see the value in the second column. But we are seeing two different rows in the header for the second column as shown below.

| | | | ------> The second column is having two rows but the value 'One' is not displayed. Also the table is
------ split at coluumn 1.
| | | |


Please guide us on how to go ahead?

When you are using grid in split mode, you need to avoid sutuation of full header row collapse. 
If you are using above code, the left part of grid will not have second row at all ( it fully spanned with upper one ) , which will result in visual inconsistence. 
Basically you need to have at least one cell for each row in left and right part of grid. 
In your case , the only way to replace code with 
       attachHeader( , One, #rspan);

Hi,

Thanks for the reply.

We were getting the grid for which the left part was fully spanned and in the right part first column was split horizontally into two rows and the last column was also fully spanned as expected. But we were not getting the value(One) in the first column of the right part where the header was split horizontally. How can i get the value displayed?

In case of grid without split the next init will work correctly 

 mygrid3 = new dhtmlXGridObject('gridbox3');
 mygrid3.setImagePath('codebase/imgs/');
 mygrid3.setHeader("a,b,c");
 mygrid3.setInitWidths("100,100,100")
 mygrid3.attachHeader("#rspan,One,#rspan");
 mygrid3.init();
 mygrid3.setSkin("modern");


In case of split you need to use one of below modification

 mygrid = new dhtmlXGridObject('gridbox');
 mygrid.setImagePath('codebase/imgs/');
 mygrid.setHeader("a,b,c");
 mygrid.setInitWidths("100,100,100")
 mygrid.attachHeader("#rspan,One,&nbsp");
 mygrid.init();
 mygrid.setSkin("modern");
  mygrid.splitAt(2); 
 
 
 mygrid2 = new dhtmlXGridObject('gridbox2');
 mygrid2.setImagePath('codebase/imgs/');
 mygrid2.setHeader("a,b,c");
 mygrid2.setInitWidths("100,100,100")
 mygrid2.attachHeader("&nbsp,One,#rspan");
 mygrid2.init();
 mygrid2.setSkin("modern");
 mygrid2.splitAt(1); 

Hello,

I've had this problem right now and it seems that the solution above did not worked for me.
So, i've managed to make a trick

In the cell from the top you can put the desired label of the column and the style  border-bottom: solid 0px;
and in the one from the botton put the label   and the style: border-top: solid 0px;

In this way you won't see the line between the two cells and it will look exactly like a cell rowspan=2

mygrid.setHeader('Product,...,null,['border-bottom: solid 0px;',...]);
mygrid.attachHeader(' ,...,['border-top: solid 0px;',...]);

I've attached a jpg file with my result. The trick was applied only on the first column.