123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- ---
- title: Showing Extra Data For Grid Rows
- order: 29
- layout: page
- ---
-
- [[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
- <<UsingGridWithAContainer#using-grid-with-a-container,
- 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);
- }
- }
- ....
|