Vaadin Grid cell not showing multiline rows

user_1677963 0
Viewed 6724

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: Wanted result, implemented with Vaadin Table

vaadin grid java
4 Answers

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.

enter image description here

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.

user_55171210
Related