Feature request for merging cells

[AviAkGlobal]

This is a feature request for merging cells.
I didn't see any way to Merge cells in the documentation. I'll try to implement it myself, but it seems that someone with more experience with this lib will probably do it faster and less buggy.

[TonyGermaneri]

I've been thinking about doing it for quite some time, but I'm kinda stuck, so I've been avoiding it. This also seems related to issue #64. Kind of the opposite. Is there a canonical unambiguous way to represent column/row merged data?

This is my idea so far using organic data (null or undefined strategically placed):

So this is the original unmerged data:

[
    {a: '0', b: '1', c: '2', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'}
]

Row 1, cell's c and d are merged:

[
    {a: '0', b: '1', c: undefined, d: '3'},
    {a: '0', b: '1', c: '2', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'}
]

Row 1 and 2 are merged:

[
    {a: '0', b: '1', c: '2', d: '3'},
    {a: undefined, b: undefined, c: undefined, d: undefined},
    {a: '0', b: '1', c: '2', d: '3'}
]

Row 1 and 2 are merged, but just cells c and d. Ambiguous to merge row 0 c, d. row 1 c, d separately.

[
    {a: '0', b: '1', c: undefined, d: undefined},
    {a: '0', b: '1', c: undefined, d: undefined},
    {a: '0', b: '1', c: '2', d: '3'}
]

So you can see there is ambiguity to merging cells using organic data. So these are ideas to overcome it, I don't like any of them one bit. I wish I could use organic data to merge cells.

Keywords

[
    {a: '0', b: '1', c: 'cdg-command:merge:0:d,1:c', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'}
]

Value object

[
    {a: '0', b: '1', c: {mergeX: true, mergeY: true, value: '2'}, d: '3'},
    {a: '0', b: '1', c: '2', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'}
]

Supporting object

[
    {a: '0', b: '1', c: '2', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'},
    {a: '0', b: '1', c: '2', d: '3'}
]

schema.merge: [[c: {x: true, y: true}]]

Of the three, I like supporting object the most, but it is far from desirable due to the fact that it separates the data from the merges. This makes the full data now proprietary. I'll ask the SheetJS maintainer how excel does it. Maybe there is an organic way I'm not aware of.

Of course any suggestions are welcome.

[TonyGermaneri]

Sheets says it's all proprietary. I think I'll use the supporting object attached to schema. He says that's what excel does internally. Sounds the least invasive.

[TonyGermaneri]

Just FYI, if you're willing to adapt data, you can fake merging cells:

http://jsfiddle.net/g5f21oxy/

But it's not really merging cells, it's adding a child grid into a cell of a grid.

I'd still like to make real cell merging.

[AviAkGlobal]

I think I would go on with the supporting object solution. I've got from @SheetJS the !merges fields per sheet, which might assist in building that kind of an object. I'll let you know here how it goes :-) ...

[TonyGermaneri]

Can you show me what the merge fields look like?

[AviAkGlobal]

The lib @SheetJS gets it in this format (under specific sheet object):

"!merges": [{
				"s": {
					"c": 0,
					"r": 12
				},
				"e": {
					"c": 2,
					"r": 12
				}
			}

In my understanding, 's' is for start and 'e' is for end.
The Open XML Excel sheet has merged range of A13:C13

[furnash]

Just checking if a solution has been found for merging. Thanks.

[TonyGermaneri]

I have put no effort into this feature as of yet. I think the solution proposed is the correct one, just need to put in the time. Altering the draw method is required. Per cell, the cell would need to check if it is merged with a cell above/below/right of it.

How would you deal with the reordering of data at that point?

[gkhabada]

Hello. Thank you for the great product.

I have a question. Is it possible to merge cells if sorting and filtering is not required?

[TonyGermaneri]

I would try using another solution (different grid library) if you really need cell merging right now.
Unless you really need some feature of canvas-datagrid.

That said...

You can "fake" merging the cells by removing the borders on the sides of certain cells and removing the data from others, making it appear that cells are merged, but the data would still be uniform.

To do that you would subscribe to the after draw or before draw events. There are some examples in the documentation and tutorials.

Event info:

https://tonygermaneri.github.io/canvas-datagrid/docs/index.html#canvasDatagrid#event:beforerendercell

https://tonygermaneri.github.io/canvas-datagrid/docs/index.html#canvasDatagrid#event:afterrendercell

Cell properties (accessible in the event via e.cell)
https://tonygermaneri.github.io/canvas-datagrid/docs/index.html#canvasDatagrid.cell

A bit on how to use the draw related events:
https://tonygermaneri.github.io/canvas-datagrid/docs/index.html#tutorial--Draw-a-picture

I would try and hook into these events and manipulate e.cell. It is mutable, but some of the properties might be overwritten in between the events. There might be undocumented properties attached to the cell too (e.g.: borders?). In the very worst case you can abort the rendering of n cells and draw your own merged version. Which is pretty much what this ticket was made for.