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?
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
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.
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.
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().
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 !