CODEWITHSUNDEEP
c#wpf
Icet
Icet

Reputation: 688

How to dynamically add rows and merge cells

I need to create a table where I can add dynamically rows and merge it. I searched a lot and couldn't find any good solutions for me :( This is how it should work:

http://s12.postimg.org/84ywzdq71/bez_tytu_u.jpg

Do you have any ideas how to create it? It should have also option to sort it.

Upvotes: 0

Views: 1471

Answers (1)

quetzalcoatl
quetzalcoatl

Reputation: 33566

Option 1:

<Grid> + columns/rowsdefinitions + Grid.RowSpan + Grid.ColumnSpan + <Border> + <TextBlock> + Background + proper data bindings (or hardwired data..) for each TextBlock. That's totally basic layout for that. If the data source has variable number of rows (Cats, Dog, Mouse, IDs, ...) then you will need also quite a lot code to generate it. Not a good idea in general.

Option 2:

Proper ViewModel + simple Grid for the header, SharedSizeGroups for each column + ItemsControl(vertical) + custom ItemTemplate(Item = Cat|Dog|Mouse, Z, and inner data) based on Grid with common SharedSizeGroups so that the Columns in each item(Cat,Mouse..) are the same width. Columns of that template need to contain either a single TextBlock(with animal type or "Z"), or another inner ItemsControl(vertical, too) with custom ItemTemplate(ID, X, Y). This inner template should be Grid-based too, and use SharedSizeGroups so the columns will align with the header. Rows probablu can have predetermined constant-height.

This option allows you to add rows by simply adding them to the collection in the viewmodel, and you don't have to merge anything since the outer ItemTemplate specifies the Cat/Z as simple single 'cell' of larger height, and it's the inner ItemsTemplate that splits the large cells into more embedded rows.

Option 3:

Or just take some commercial (Infragistics, DevExpress, Telerik, etc, or some free ones) "GridView/DataTable"(names vary) or similar component. They usually allow for "Grouping" and/or "Summaries" so you should be able to at leats make big "Cat" cell with smaller "details" cells. I don't know how about Z - it depends on the concrete gridview component.

For example, play a little with these demos of DevX Grid (warn:commercial!) http://demos.devexpress.com/MVCxGridViewDemos/ to get the feeling. Especially see the "Grouping" and "Master-Detail". The latter one is similar to option2: "master" is the outer ItemTemplate, "detail" is the inner ItemTemplate. You can style the inner in any way, so it can be a "table view" like in that demo or it can seamlessly mimic to be part of the table.

Upvotes: 1

Related Questions