To merge 4 cells (2rows and 2 columns)

#1

Is there any way to merge 4 cells (2rows x 2columns) together?
Suppose we have the following header:
grid.setHeader(“1-1,1-2,1-3,1-4”);
grid.attachHeader(“2-1,2-2,2-3,2-4”);
grid.attachHeader(“3-1,3-2,3-3,3-4”);
grid.attachHeader(“4-1,4-2,4-3,4-4”);

The question is how to merge cells 2-2,2-3,3-2,3-3 together.

I found some kind of solution, but not sure if it is proper one because this solution has a trick to balance cells quantity in the third row. I wonder if it may cause any error somewhere later in grid methods.

Here is the way I implement the task:
grid.setHeader(“1-1,1-2,1-3,1-4”);
grid.attachHeader(“2-1,2-2,#span,2-4”);
grid.attachHeader(“3-1,#rspan,3-4”);//here only 3 cells
grid.attachHeader(“4-1,4-2,4-3,4-4”);

May be it could be done other way without tricks. I’ll appreciate any comments

#2

Yes, of course. in my opinnion, could be:

grid.setHeader(“4 cells merge,#cspan”)
grid.attachHeader("#rspan,#rspan");

if you want merge more cell, you only need insert more cspan and rspan, for example:

(4 columns * 2 rows)
grid.setHeader(“Data,#cspan,#cspan,#cspan”)
grid.attachHeader("#rspan,#rspan,#rspan,#rspan");
grid.attachHeader(“A,B,C,D”);

#3

I think so could be:

grid.setHeader(“1-1,1-2,1-3,1-4”);
grid.attachHeader(“2-1,merge 4 cell,#cspan,2-4”);
grid.attachHeader(“3-1,#rspan,#rspan,3-4”);
grid.attachHeader(“4-1,4-2,4-3,4-4”);

#4

Thank you for your response.
For some reason it doesn’t work properly for me this way:

grid.attachHeader(“2-1,merge 4 cell,#cspan,2-4”);
grid.attachHeader(“3-1,#rspan,#rspan,3-4”);

If I put #rspan two times in the third header row then all cells go crazy:?
I think the problem is that both #cpan and #rspan is applied for one cell at the same time. I’ve seen somewhere in this forum that it’s not allowed for the grid.

Only for the following creates table cells properly for me:

grid.attachHeader(“2-1,2-2,#span,2-4”);
grid.attachHeader(“3-1,#rspan,3-4”);//here only 3 cells instead of 4

The above overcomes only html generation and only for header rows except the first one. It doesn’t seem to be a clear solution. I don’t think also that the rest functionality will work properly in this way.
I doubt that advanced merging is supported in the current version of the grid component, only simple merging.
I found smarter solution :wink: - change header to avoid this kind of advanced merging :slight_smile:

#5

How to merge/split cells in dhx grid suite 6?any dhx API/method exist?

#6

Here you can find tutorial about adding the spans in the dhtmlxGrid 6:
https://docs.dhtmlx.com/suite/grid__usage.html#addingremovingspans