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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
[[showing-extra-data-for-grid-rows]]
Showing extra data for Grid rows
--------------------------------
Some data might not be suitable to be shown as part of a regular Grid,
e.g. because it's too large to fit into a Grid cell or because it's
secondary information that should only be shown on demand. This kind of
situation is covered with the row details functionality that shows a
Vaadin Component in an area expanded below a specific row. Using this
functionality is a two step process: first you need to implement a
generator that lazily creates the `Component` for a row if it has been
expanded, and then you need to hook up the events for actually expanding
a row.
This example uses the same data as in the
link:UsingGridWithAContainer.asciidoc[Using Grid with a Container]
example.
[[detailsgenerator]]
DetailsGenerator
^^^^^^^^^^^^^^^^
A details generator is a callback interface that Grid calls to create
the Vaadin `Component` that is used for showing the details for a specific
row. In this example, we create a layout that contains a label, an image
and a button that all use data from the row.
[source,java]
....
grid.setDetailsGenerator(new DetailsGenerator() {
@Override
public Component getDetails(RowReference rowReference) {
// Find the bean to generate details for
final GridExampleBean bean = (GridExampleBean) rowReference.getItemId();
// A basic label with bean data
Label label = new Label("Extra data for " + bean.getName());
// An image with extra details about the bean
Image image = new Image();
image.setWidth("300px");
image.setHeight("150px");
image.setSource(new ExternalResource("http://dummyimage.com/300x150/000/fff&text=" + bean.getCount()));
// A button just for the sake of the example
Button button = new Button("Click me", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
Notification.show("Button clicked for " + bean.getName());
}
});
// Wrap up all the parts into a vertical layout
VerticalLayout layout = new VerticalLayout(label, image, button);
layout.setSpacing(true);
layout.setMargin(true);
return layout;
}
});
....
[[opening-the-details-for-a-row]]
Opening the details for a row
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Since there are multiple different UI patterns for how details should be
opened (e.g. clicking a button in a cell or double clicking anywhere on
the row), Grid does not have any action enabled by default. You can
instead implement your own listener that takes care of showing and
hiding the details for the rows. One easy way of doing this is to add an
item click listener that toggles the status whenever a row is double
clicked.
[source,java]
....
grid.addItemClickListener(new ItemClickListener() {
@Override
public void itemClick(ItemClickEvent event) {
if (event.isDoubleClick()) {
Object itemId = event.getItemId();
grid.setDetailsVisible(itemId, !grid.isDetailsVisible(itemId));
}
}
});
....
[[full-example]]
Full example
^^^^^^^^^^^^
Putting all these pieces together, we end up with this class that uses
the same data as in the link:UsingGridWithAContainer.asciidoc[Using
Grid with a Container] example.
[source,java]
....
import com.vaadin.event.ItemClickEvent;
import com.vaadin.event.ItemClickEvent.ItemClickListener;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Component;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Grid.DetailsGenerator;
import com.vaadin.ui.Grid.RowReference;
import com.vaadin.ui.Image;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
public class ShowingExtraDataForRows extends UI {
@Override
protected void init(VaadinRequest request) {
final Grid grid = new Grid();
grid.setContainerDataSource(GridExampleHelper.createContainer());
grid.setDetailsGenerator(new DetailsGenerator() {
@Override
public Component getDetails(RowReference rowReference) {
// Find the bean to generate details for
final GridExampleBean bean = (GridExampleBean) rowReference.getItemId();
// A basic label with bean data
Label label = new Label("Extra data for " + bean.getName());
// An image with extra details about the bean
Image image = new Image();
image.setWidth("300px");
image.setHeight("150px");
image.setSource(new ExternalResource("http://dummyimage.com/300x150/000/fff&text=" + bean.getCount()));
// A button just for the sake of the example
Button button = new Button("Click me", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
Notification.show("Button clicked for " + bean.getName());
}
});
// Wrap up all the parts into a vertical layout
VerticalLayout layout = new VerticalLayout(label, image, button);
layout.setSpacing(true);
layout.setMargin(true);
return layout;
}
});
grid.addItemClickListener(new ItemClickListener() {
@Override
public void itemClick(ItemClickEvent event) {
if (event.isDoubleClick()) {
Object itemId = event.getItemId();
grid.setDetailsVisible(itemId, !grid.isDetailsVisible(itemId));
}
}
});
setContent(grid);
}
}
....
|
