Enable wordwrap (multi-line) in vaadin grid

Question

I am trying to implement a table based on the Vaadin grid component. Some fields contain a lot of text, and the grid always shows one row in this case instead of multi-line.

I tried changing the CSS according to some ideas from the vaadin forum , but I get the same result. Also in the same case, a single line with an ellipsis is displayed in the grid headers.

Could you provide any ideas how this can be fixed?

Answer 1

Grid manages this style on the client side, and we cannot and should not control it directly.

Grid DetailsGenerator.

, . , , .

,

Grid g = new Grid();
g.addColumn("num");
g.addColumn("val");

g.setWidth(400, Unit.PIXELS);
g.setHeight(300, Unit.PIXELS);

g.getColumn("num").setWidth(100);
g.getColumn("val").setWidth(300);

g.addRow("1", "This is just a simple test. No need to take it too seriously, please !!!!");
g.addRow("2", "This is just a simple test. No need to take it too seriously, please !!!!");
g.addRow("3", "This is just a simple test. No need to take it too seriously, please !!!!");
g.addRow("4", "This is just a simple test. No need to take it too seriously, please !!!!");

g.addItemClickListener(new ItemClickListener() {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    public void itemClick(ItemClickEvent event) {
        g.setDetailsVisible(event.getItemId(), !g.isDetailsVisible(event.getItemId()));
    }
});

g.setDetailsGenerator(new DetailsGenerator() {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    public com.vaadin.ui.Component getDetails(RowReference rowReference) {
        String value = (String)rowReference.getItem().getItemProperty("val").getValue();
        Label val = new Label();
        val.setValue(value);
        val.addStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING);
        return val;
    }
});