Grid - How to display multiple lines in one cell

Vaadin 6 / 7 / 8 Framework UI
1

Hi guys,

first, I’m using Vaadin 7.4.5.

I’m trying the new Grid component and want to replace a Table with it. I have some long strings and want them to display in multiple lines of the same cell. I’ve done this at Table via a custom column creating a Label containing the specific HTML Code (line break marked with
).
I’ve tried to attapt the strategy using a HTMLRenderer for the column, but only the first line is showing, the rest of it disappers. Also tried using

instead of
as a separator, same result.

This is the code:

final Grid activityTable = new Grid(container);
Grid.Column column = activityTable.getColumn("bla");
column.setRenderer(new HtmlRenderer());

Any idea how to solve this? I’ve tried this solution https://vaadin.com/forum/#!/thread/9345722/9345721 , but without any results.
Also: Is this problem with multiple lines per cell solvable with Grid or do I have to use a Table for this?

Thank you for your help!

2

Hey Kilian,

I don’t think Grid supports multi-line cells.

3

You can do it but it is tricky and might be a bit buggy. I have a cell where I have mutliple lines inside. The renderer creates a list that looks like this:

[code]

  • Line1
  • Line2
    • ...
[/code]Then I have a CellStyleGenerator. The CellStyleGenerator sets a style for every cell in the entire row based on the number of entries in the list.

In the theme I generate the styles with the help of a for loop in scss

.fixed-row-height .v-grid-row {
  position: initial; transform: none !important;
}

@for $i from 2 through 10 {
   .fixed-row-height .cell-height-#{$i}  {
     height: $v-table-row-height * $i !important;
  }
}

The ul and li tags also need a bit of formating that the margins are correct.
In my case it works quite well, but I am not sure how this would work with a lot of items inside or a lot of rows in the grid.

4

Yes, you can probably force it to show multiple lines on one row, but that will most likely break scrolling / lazy loading in the grid, because grid depends highly on fixed row heights in order to calculate scroll position relative the row index.

5

To get word-wrap in a Table() I use a ColumnGenerator() to return a new Label() with ContentMode.HTML - works fine without any css (although unsure on the lazy loading stuff…) - keen to hear also how this could be done in a Grid().

6

Hi @Killian,

Have you solve this issue? Im also having this kind of dilema.

Regards,

7

Hello,
I face the same problem… I used a trick using CellStyleGenerator and RowStyleGenerator to force custom heights but the scroll of the grid with lazy loading is broken.
I really need to be able to display different height rows and absolutely don’t know how to do…
Help !

8

I need dynamic row heights too, because of very long Strings in one of my columns, This should be made possible in the Grid.

9

A bit late to the party.
+1 for dynamic Row Height