Элемент Vaadin Grid не показывает многострочные строки

Ответ 1

Vaadin Grid по-прежнему не имеет встроенной поддержки многострочных столбцов, но вы можете попробовать импровизацию, например, я предлагаю посмотреть обсуждение форума Vaadin по ссылке: Сетка - отображение нескольких строк в одной ячейке

Также вы можете попробовать создать собственный рендеринг для Grid.

Ответ 2

Для людей с большим текстом в столбцах и которые хотят отображать большие данные в столбцах Grid без их отсечки по умолчанию:

• Добавьте имя стиля в свою сетку:

  grid.addStyleName("commentsGrid");

• Добавьте имена стилей в свои строки и ячейки, если вы хотите их настроить:

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

  и

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

• Для меня столбец проблем - комментарии. Таким образом, окружайте текст тегом p с оберткой класса стилей и фиксированной шириной.

  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);
  

• Затем я назвал классы, упомянутые выше, следующим образом:

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

И я получил результат следующим образом:

Я не ниндзя CSS, поэтому вы можете сделать его более красивым, чем это.

Если вам не нравятся все строки с одинаковыми большими высотами, вы можете рассчитать rowHeights на лету, а затем установить их на шаге 2. Я не уверен на 100%.

Ответ 3

Вы пытались добавить средство визуализации стилей в свои ceolumns для добавления пользовательского класса css, где вы можете разместить определенную высоту?

Пример:

Java:

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

CSS

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

Пример: https://vaadin.com/docs/-/part/framework/components/components-grid.html