1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
package com.vaadin.tests.components.grid;
import com.vaadin.server.VaadinRequest;
import com.vaadin.tests.util.Person;
import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Grid.SelectionMode;
import com.vaadin.ui.components.grid.FooterCell;
import com.vaadin.ui.components.grid.FooterRow;
import com.vaadin.ui.components.grid.HeaderCell;
import com.vaadin.ui.components.grid.HeaderRow;
public class GridHeaderStyleNames extends GridEditorUI {
private HeaderCell nameHeaderCell;
private HeaderCell mergedCityCountryCell;
private FooterCell nameFooterCell;
private HeaderRow headerRow;
private FooterRow footerRow;
private boolean stylesOn = true;
@Override
protected void setup(VaadinRequest request) {
Grid<Person> grid = createGrid();
grid.setItems(createTestData());
grid.setSelectionMode(SelectionMode.MULTI);
nameHeaderCell = grid.getDefaultHeaderRow().getCell("firstName");
grid.getDefaultHeaderRow().setStyleName("foo");
headerRow = grid.prependHeaderRow();
mergedCityCountryCell = headerRow.join("city", "street");
mergedCityCountryCell.setText("Merged cell");
grid.setColumns("email", "firstName", "city", "street", "lastName",
"zip");
addComponent(grid);
footerRow = grid.appendFooterRow();
nameFooterCell = footerRow.getCell("firstName");
getPage().getStyles().add(
".name {background-image: linear-gradient(to bottom,green 2%, #efefef 98%) !important;}");
getPage().getStyles().add(
".valo .v-grid-header .v-grid-cell.city-country {background-image: linear-gradient(to bottom,yellow 2%, #efefef 98%) !important;}");
getPage().getStyles().add(
".valo .v-grid-footer .v-grid-cell.name-footer {background-image: linear-gradient(to bottom,blue 2%, #efefef 98%) !important;}");
getPage().getStyles().add(
".valo .v-grid .v-grid-row.custom-row > * {background-image: linear-gradient(to bottom,purple 2%, #efefef 98%);}");
setCellStyles(true);
setRowStyles(true);
Button button = new Button("Toggle styles");
button.addClickListener(event -> {
setCellStyles(!stylesOn);
setRowStyles(!stylesOn);
stylesOn = !stylesOn;
});
addComponent(button);
}
protected void setCellStyles(boolean set) {
if (set) {
nameHeaderCell.setStyleName("name");
nameFooterCell.setStyleName("name-footer");
mergedCityCountryCell.setStyleName("city-country");
} else {
nameHeaderCell.setStyleName(null);
nameFooterCell.setStyleName(null);
mergedCityCountryCell.setStyleName(null);
}
}
protected void setRowStyles(boolean set) {
if (set) {
headerRow.setStyleName("custom-row");
footerRow.setStyleName("custom-row");
} else {
headerRow.setStyleName(null);
footerRow.setStyleName(null);
}
}
}
|
