web-dev-qa-db-fra.com

La cellule de grille de Vaadin ne montrant pas les lignes multilignes

Avec Vaadin Grid, je souhaite générer des cellules multilignes pour chaque cellule ayant plus de contenu dans la cellule qui recouvre sa largeur.

J'ai déjà essayé:

  • Java \n caractère de nouvelle ligne et styles CSS comme white-space: pre; mais cela ne semble pas fonctionner. (Cette solution a fonctionné pour la table)

  • rendu personnalisé setRenderer(HtmlRenderer) avec </br>tags et différents paramètres d'affichage CSS

Résultat désiré:  Wanted result, implemented with Vaadin Table

javagridvaadin
16
Zigac

Vaadin Grid n'a toujours pas de support natif pour les colonnes multilignes, mais vous pouvez essayer quelques improvisations. Je suggère par exemple de consulter la discussion du forum Vaadin sur le lien: Grille - Comment afficher plusieurs lignes dans une cellule

Vous pouvez également essayer de créer un moteur de rendu personnalisé pour la grille.

3
Dragan Radevic

Pour les personnes avec texte volumineux dans les colonnes et qui souhaitent afficher des données volumineuses dans les colonnes de la grille sans les avoir coupées par défaut:

  1. Ajoutez un nom de style à votre grille:

    grid.addStyleName("commentsGrid");

  2. Ajoutez des noms de style à vos lignes et cellules si vous souhaitez les personnaliser:

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

    et

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

  3. Pour moi la colonne de problème était des commentaires. Donc, entourez le texte avec la balise p avec la classe de style wrap et une largeur fixe.

    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. Ensuite, j'ai stylé les classes mentionnées ci-dessus comme suit:

    .commentsGrid td{
    height:150px !important;
 }

p.wrap{
  width: 45em;
  Word-wrap: break-Word;
  Word-break: break-all;
  white-space: normal; 
}

Et j'ai un résultat comme ça:

Je ne suis pas un ninja CSS, vous pouvez donc le rendre beaucoup plus beau.

 enter image description here

Si vous n'aimez pas que toutes les lignes aient des hauteurs égales, vous pouvez calculer rowHeights à la volée puis les définir à l'étape 2. Je ne suis pas sûr à 100%.

1
Mahendran Ayyarsamy Kandiar

Une autre façon d’ajuster un long texte de défilement dans une colonne de grille consiste à définir une hauteur de ligne pour la grille, à utiliser un rendu de composant et à restituer une zone de texte contenant le texte. Cela fonctionne bien car si le texte est trop long, l'utilisateur aura une barre de défilement à l'intérieur de la cellule pour voir le texte en débordement.

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

et cela dans le css

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

Exemple

1
mgrecol

Avez-vous essayé d’ajouter un moteur de rendu de style à vos colonnes pour ajouter une classe CSS personnalisée dans laquelle vous pouvez placer la hauteur définie?

Exemple:

Java:

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

CSS:

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

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

0
Rene M.