Enable wordwrap (multiline) in vaadin grid

Question

I am trying to implement table based on Vaadin grid component. Some fields contains a lot of text and grid always show single line in this case instead of multiline.

I have tried to modify CSS according to some ideas from vaadin forum, but I am getting the same result. Also in same case in grid headers it displays single line with ellipsis.

Could please provide any ideas how it can be fixed?

score 4 · Answer 1 · answered Aug 16 '16 at 06:13

Grid manages this style from the client side and we can not and should not control this directly.

But Grid component provides a way to show the hidden data or details by DetailsGenerator.

However, for header we can not do anything as the only solutions is to keep header small and descriptive as possible. But still in my opinion word wrap on header will not look nice.

Following examples manages visibility of details on item selection,

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

Thanks for answer! I had tried implement something like that, but in my table 12 columns, some of them should be multiline and with details generator it looks a bit oddly. Also you sad that mutline in header not look nice, im agree with you, but with real data, not examples or showcases with name/value, column names caused by bussines so you can not just change them. Thank you! — aim, Aug 19 '16 at 15:41

Enable wordwrap (multiline) in vaadin grid

1 Answers1