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

Answer 1

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 commentsConverter = new Converter(){
           @Override
           public String convertToModel(String value, Class targetType, Locale locale)
                   throws com.vaadin.data.util.converter.Converter.ConversionException {
   
               return value;
           }
   
           @Override
           public String convertToPresentation(String value, Class targetType, Locale locale)
                   throws com.vaadin.data.util.converter.Converter.ConversionException {
               if(value !=null){
                   return "
   "+value+"
   ";
               }else{
                   return "";
               }
           }
   
           @Override
           public Class getModelType() {
               return String.class;
           }
   
           @Override
           public Class 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.