java - unable - vaadin reporting tool

Celda de cuadrícula de Vaadin que no muestra filas multilínea

Question

Con Vaadin Grid, quiero generar celdas multilínea para cada celda que tenga más contenido en la celda que se superponga a su ancho.

Ya lo he intentado

• java /n nueva línea de caracteres y estilos CSS como white-space: pre; pero no parece funcionar. (Esta solución funcionó para la tabla)

• el renderizador personalizado setRenderer(HtmlRenderer) con etiquetas </br> y diferentes configuraciones de visualización de CSS

Resultado deseado:

Answer 1

¿Ha intentado agregar un renderizador de estilo a sus columnas para agregar una clase css personalizada, donde puede colocar su altura definida?

Ejemplo:

Java:

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

CSS:

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

Ejemplo de: https://vaadin.com/docs/-/part/framework/components/components-grid.html

Answer 2

Otra forma de ajustar el texto de desplazamiento largo en una columna de la cuadrícula es establecer un alto de fila para la cuadrícula y usar un procesador de componentes y generar un área de texto en la cuadrícula que contiene el texto. Esto funciona bien porque si el texto es demasiado largo, el usuario obtendrá una barra de desplazamiento dentro de la celda para ver el texto desbordado.

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

y esto en el css

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

Example

Answer 3

Para las personas con texto grande en columnas y que desean mostrar datos grandes en Columnas de cuadrícula sin tener que cortarlas de forma predeterminada:

1. Agregue un nombre de estilo a su cuadrícula:

   grid.addStyleName("commentsGrid");

2. Agregue algunos nombres de estilo a sus filas y celdas si desea personalizarlos:

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

   y

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

3. Para mi la columna de problemas fueron los comentarios. Así que rodee el texto con la etiqueta p con ajuste de clase de estilo y un ancho fijo.

   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. Luego estuve las clases mencionadas anteriormente de la siguiente manera:

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

Y tengo un resultado como este:

No soy un ninja CSS, así que puedes hacerlo mucho más hermoso que esto.

Si no le gusta que todas las filas tengan alturas igualmente grandes, puede calcular las Alturas de las filas sobre la marcha y configurarlas en el paso 2. No estoy seguro al 100%.

Answer 4

Vaadin Grid aún no tiene soporte nativo para columnas multilínea, pero puede probar algo de improvisación, por ejemplo, sugiero ver la discusión del foro de Vaadin en el enlace: Grid - Cómo mostrar múltiples líneas en una celda

También puedes intentar crear un renderizador personalizado para el Grid.