(this picture is a datagrid table)
if the text too long,I want it show two row or more ,Rather than show " …"
(this picture is a datagrid table)
if the text too long,I want it show two row or more ,Rather than show " …"
Hi,
To achieve text wrapping you need to wrap values into <div>
tag using generated columns:
ordersDataGrid.addGeneratedColumn("amount", new DataGrid.ColumnGenerator<Order, String>() {
@Override
public String getValue(DataGrid.ColumnGeneratorEvent<Order> event) {
BigDecimal amount = event.getItem().getAmount();
return "<div>" + amount + "</div>";
}
@Override
public Class<String> getType() {
return String.class;
}
});
ordersDataGrid.getColumnNN("amount").setRenderer(ordersDataGrid.createRenderer(DataGrid.HtmlRenderer.class));
then define custom style name for a DataGrid and add the following styles:
.wrapping-grid {
.v-grid-cell {
div {
width: 100%;
height: 100%;
white-space: normal;
word-wrap: break-word;
}
height: 50px;
}
}
Unfortunately, DataGrid only supports equal height rows, so you have to make each row tall enough to accommodate two lines or more, even though there would only be one row in some of them.