web-dev-qa-db-ja.com

Vaadinグリッドセルに複数行の行が表示されない

Vaadin Gridを使用して、セル内のコンテンツが幅と重なるすべてのセルに対してマルチラインセルを生成したいと思います。

私はすでに試しました：

  • Java _\n_改行文字と_white-space: pre;_のようなCSSスタイリングですが、機能していないようです。 （このソリューションはテーブルで機能しました）

  • カスタムレンダラーsetRenderer(HtmlRenderer) _</br>_タグとさまざまなCSS表示設定

望ましい結果： Wanted result, implemented with Vaadin Table

javagridvaadin
16
Zigac

Vaadinグリッドはまだ複数行の列をネイティブでサポートしていませんが、即興を試すことができます。たとえば、リンクでVaadinフォーラムのディスカッションを参照することをお勧めします。 グリッド-1つのセルに複数の行を表示する方法

また、グリッド用のカスタムレンダラーの作成を試みることもできます。

3
Dragan Radevic

列に大きなテキストがあり、デフォルトでカットオフせずにグリッド列に大きなデータを表示したい場合：

  1. グリッドにスタイル名を追加します。

    grid.addStyleName("commentsGrid");

  2. カスタマイズしたい場合は、行とセルにいくつかのスタイル名を追加します。

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

    そして

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

  3. 私にとって問題の列はコメントでした。したがって、テキストをpタグで囲み、スタイルクラスwrapと固定幅を使用します。

    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. 次に、上記のクラスのスタイルを次のように設定しました。

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

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

そして、私はこのような結果を得ました：

私はCSS忍者ではないので、これよりもずっと美しくすることができます。

enter image description here

すべての行の高さを等しくしたくない場合は、rowHeightsをその場で計算し、手順2で設定できます。100％確信はありません。

2
Mahendran Ayyarsamy Kandiar

長いスクロールテキストをグリッド列に合わせる別の方法は、グリッドの行の高さを設定し、コンポーネントレンダラーを使用して、テキストを含むグリッド内のテキスト領域をレンダリングすることです。テキストが長すぎると、ユーザーはセル内にスクロールバーを表示して、オーバーフローしたテキストを表示できるため、これは適切に機能します。

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

そしてこれはCSSで

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

例

1
mgrecol

定義した高さを配置できるカスタムcssクラスを追加するために、スタイルレンダラーをceolumnsに追加しようとしましたか？

例：

Java：

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

CSS：

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

例： https://vaadin.com/docs/-/part/framework/components/components-grid.html

0
Rene M.