Vaadin Grid cell not showing multiline rows

Question

With Vaadin Grid, I want to generate multiline cells for every cell that have more content in cell that overlaps its width.

I have allready tried:

• java \n new line character and CSS stylings like white-space: pre; but it does not seem to work. (This solution worked for Table)

• custom renderer setRenderer(HtmlRenderer) with </br>tags and different CSS display settings

Desired result:

Pugging

UPDATE: Vaadins Grid 2 comes with 'Variable row height support' vaadin.com/blog/-/blogs/… There is no Java API supporting it yet, but there might be alternative: "With Vaadin Framework 8.0, we included an enabling piece of technology called HTML imports. This allows WebComponents such as <vaadin-grid> to be used together with Framework 8.0." – Pugging

Answer 1

Vaadin Grid still doesn't have native support for multiline columns but you can try some improvisation, on example I suggest to see the Vaadin forum discussion on the link: Grid - How to display multiple lines in one cell

Also you can try to create custom renderer for the Grid.

Progenitor

Thank you for your anwser Dragan. Could you provide some sample implementation? – Pugging

See the link vaadin.com/docs/-/part/framework/components/… I suggest to try implement HtmlRenderer – Progenitor

I have done that but, row is not vertically streched, so no content is shown after first <br>. – Pugging

For the first it seems like a Vaadin bug. I think that you can note as bug on vaadin.com/bug . Secondly, you can use: vaadin.com/directory#!addon/componentrenderer add on and place a VerticalLayout with labels in column of you grid. It is easier than creating your own renderer. But creating your own renderer is more performant I think. – Progenitor

Thank you Dragan for provided workaround. But i'm looking for native implementation. – Pugging

Answer 2

For people with large text in columns and who want to display large data in Grid Columns without having them cutoff by default:

1. Add a Style name to your grid:

   grid.addStyleName("commentsGrid");

2. Add some style names to your rows and cells if you would like to customize them:

   grid.setRowStyleGenerator(rowRef -> {// Java 8
       return "bigRows";
   }); 
   

   and

   grid.setCellStyleGenerator(new Grid.CellStyleGenerator(){
        @Override
        public String getStyle(CellReference cellReference) {
            return "bigCell";
        }
   });
   

3. For me the problem column was comments. So surround the text with p tag with style class wrap and a fixed width.

   Converter<String, String> commentsConverter = new Converter<String,  String>(){
           @Override
           public String convertToModel(String value, Class<? extends String> targetType, Locale locale)
                   throws com.vaadin.data.util.converter.Converter.ConversionException {
   
               return value;
           }
   
           @Override
           public String convertToPresentation(String value, Class<? extends String> targetType, Locale locale)
                   throws com.vaadin.data.util.converter.Converter.ConversionException {
               if(value !=null){
                   return "<p class=\"wrap\">"+value+"</p>";
               }else{
                   return "";
               }
           }
   
           @Override
           public Class<String> getModelType() {
               return String.class;
           }
   
           @Override
           public Class<String> getPresentationType() {
               return String.class;
           }
   
       };
       grid.getColumn("comments").setRenderer(new HtmlRenderer(), commentsConverter);
       grid.getColumn("comments").setWidth(700d);
   

4. Then i styled the classes mentioned above as follows:

   .commentsGrid td{
       height:150px !important;
    }
   
   p.wrap{
     width: 45em;
     word-wrap: break-word;
     word-break: break-all;
     white-space: normal; 
   }
   

And i got result like this:

I am not a CSS ninja, so you can make it way more beautiful than this.

If you don't like all rows to have equally large heights then you can calculate rowHeights on the fly and then set them in step 2. I am not 100% sure.

Beldam

Answer 3

Another way of fitting long scrolling text into a grid column is to set a row height for the grid and use a component renderer and render a textarea in the grid which contains the text. This works good because if the text is too long the user will get a scrollbar inside the cell to see the overflowed text.

Column screen = grid.addComponentColumn(role->{
        TextArea ta = new TextArea();
        ta.setValue(VALUE_PROVIDER_TEXT);
        ta.setStyleName("clear");
        ta.setHeight("100px");
        ta.setReadOnly(true);
        ta.setWidth("150px");
        return ta;
    });
    screen.setWidth(150);
    screen.setCaption("Screens");
    grid.setBodyRowHeight(100);

and this in the css

  .v-textarea-clear{background-color: transparent;border: none;}

Example

Reedbuck

Answer 4

With Vaadin 24 we can use a theme variant for this:

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

Other grid variants are described in the official docs.

Feodore

Answer 5

Have you tried to add a style renderer to your ceolumns to add a custom css class, where you can place your defined height?

Example:

Java:

grid.setCellStyleGenerator(cellRef -> // Java 8
    "heigher");

CSS:

.v-grid-cell.heigher {
    height: 10em;
}

Example coming from: https://vaadin.com/docs/-/part/framework/components/components-grid.html

Hawkweed

Thanks for your anwser. Please see updated question. – Pugging