Merge Cells vertically und horizontally

[kw]

Hi,

Is there a possibility to merge cells in the Grid vertically and horizontally? How complicated would it be to implement this feature?

Thanks

[Isomorphic]

Hello kw,

Yes, this is possible in the few ways - the easiest depends on what you are trying to do.

If it's sufficient to make the cells appear merged, you can use ListGrid styling APIs to merge cells by showing borders for some cells but not others.

There are advanced APIs, not currently documented, for truly merging grid cells, which you can see in action in the Analytics example if you drag out a second row facet.

There are also non-grid presentations such as a Layout full of Buttons of varying sizes.

What interaction are you trying to achieve, from a user perspective?

[kw]

Hi,

Thank you for your fast reply.

The user should be able to merge and unmerge cells dynamically, like in excel. I saw the 'getRowSpan' function in the GridRenderer, but I don't know how to use it and I want the merge vertically and horizontally.

By the way, isn't there a function in the ListGrid getRows() or getRow(1), I only found functions for retrieving selected rows.

Thanks

[Isomorphic]

Hello kw,

To get a particular record in a ListGrid, you can use:

ListGrid.getData().get(rowNum)

We'll make this more obvious in the documentation.

As far as arbitrary rowSpanning and colSpanning, using the documented APIs, extending the ListGrid or GridRenderer to implement this would be very complicated, especially if you need selection, editing, incremental rendering, clipping, inline editing, column resize, etc, to all work.

You could post about this feature in the WishList forum, or you could contact Isomorphic sales about committing to supporting this feature in connection with a license.

[mshen]

Hi,

I need something like this too. Could you provide more information on how to do this?

I couldn't find any showcase example for this. And the link mentioned in the post (Analytics example) is broken.

Thanks!

Hello kw,

Yes, this is possible in the few ways - the easiest depends on what you are trying to do.

If it's sufficient to make the cells appear merged, you can use ListGrid styling APIs to merge cells by showing borders for some cells but not others.

There are advanced APIs, not currently documented, for truly merging grid cells, which you can see in action in the Analytics example if you drag out a second row facet.

There are also non-grid presentations such as a Layout full of Buttons of varying sizes.

What interaction are you trying to achieve, from a user perspective?

[Isomorphic]

We fixed the link to the Analytics example.

To add to the previous approaches, there is now a getRowSpan() API on ListGrid that you can implement to create true rowSpanning.