How to have a click on component in a grid cell in Vaadin 8 Grid to select cells row?

问题

When clicking a cell in a Vaadin 8 Grid that contains component like VerticalLayout row does not get selected (using Vaadin 8.1.5).

If the component does not fill the whole cell then clicking the unused area in cell makes the row selected.

I have been researching how could the click on component be forwarded to the cell click listener but have not get any grip yet on that. Guess it is even not the best way to do it.

What would be the solution?

回答1:

I provide my own current solution as an answer to not mess the question and for separate possible comments. This particular one is not perfect - for example multiselect is not handled correctly - but it is just meant to give the idea how i decided to handle this.

Idea is to extend a value provider so that it holds a reference to the grid for which it generates values. Beforementioned - in addition to that it generates grid column components - adds click listener to the component.

In this package is handled click on a component and there are references to the grid and row item so select/unselect is quite easy.

@RequiredArgsConstructor // i like lombok
private static class GridCallbackValueProvider
         implements ValueProvider<GridEntity, Layout> {

   private final Grid<GridEntity> grid;

   @Override
   public Layout apply(GridEntity source) {
      AbsoluteLayout al = new AbsoluteLayout();
      al.setWidth("100px");
      al.setHeight("30px");
      al.addStyleName(((source.isValid()) ? "green" : "red" ));
      al.addLayoutClickListener( clickEvent -> {
         if(grid.getSelectedItems().contains(source))
            grid.deselect(source);
         else
            grid.select(source);                
      });
      return al;
    }

}

In case somebody is interested: in this test code GridEntity.isValid() simply returns random boolean value and it is used to choose from styles below:

.green { background-color: green; }
.red { background-color: red; }

And adding to the grid goes like:

grid.addComponentColumn(new GridCallbackValueProvider(grid) )
        .setCaption("status").setId("status").setWidth(140);

来源：https://stackoverflow.com/questions/46976331/how-to-have-a-click-on-component-in-a-grid-cell-in-vaadin-8-grid-to-select-cells