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

С помощью Vaadin Grid я хочу генерировать многострочные ячейки для каждой ячейки, у которой больше содержимого в ячейке, которая перекрывает его ширину.

Я уже пробовал:

java \n новый символ строки и стили CSS, такие как white-space: pre;, но он, похоже, не работает. (Это решение работает для таблицы)
настраиваемый рендерер setRenderer(HtmlRenderer) с тегами </br> и различными настройками отображения CSS

Желаемый результат:

Ответ 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