CODEWITHSUNDEEP
headergridvaadin
WattLee
WattLee

Reputation: 23

Can header text in Grid change line

I add a Gird column and want to display Data Name and Data Unit in in column header:

grid.addColumn("v1").setWidth("20%").setHeader("Data Name (Data Unit)").setSortable(false);

The text "Data Name (Data Unit)" is displayed in one line.

If I need to display Data Unit in a serperated line, how to modify the code? Following cases are failed:

grid.addColumn("v1").setWidth("20%").setHeader("Data Name \n(Data Unit)").setSortable(false); 
grid.addColumn("v1").setWidth("20%").setHeader("Data Name \r(Data Unit)").setSortable(false); 
grid.addColumn("v1").setWidth("20%").setHeader("Data Name <br>(Data Unit)").setSortable(false); 
grid.addColumn("v1").setWidth("20%").setHeader("Data Name <br/>(Data Unit)").setSortable(false);

Upvotes: 1

Views: 118

Answers (2)

lanmaster
lanmaster

Reputation: 330

Maybe this help:

Div div = new Div();
div.setText("Data Name\n(Data Unit)");
div.getElement().setAttribute("style", "white-space: pre-wrap;");       
grid.addColumn("v1").setWidth("20%").setHeader(div).setSortable(false);

Upvotes: 3

Paola De Bartolo
Paola De Bartolo

Reputation: 201

You could do something like:

.setHeader(new Html("<span>Data Name <br>(Data Unit)</span>"))

Upvotes: 3

Related Questions