3

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?

pirho
  • 11,565
  • 12
  • 43
  • 70
  • Maybe you could use [`select(item)`](https://vaadin.com/api/8.0.5/com/vaadin/ui/Grid.html#select-T-) method, if you know the item of your row, which is not difficult. – Shirkam Oct 30 '17 at 07:57
  • Does your custom component handle events javascript events or such? I think if the click event is not handled by the custom component then it should eventually reach the grid row. – Mika Oct 30 '17 at 12:24
  • @Mika Edited post. Custom component was misleading term. It actually is a basic Vaadin8 Layout that is in the grid cell. – pirho Oct 30 '17 at 12:28
  • @pirho Some code example might be useful :) If you are implementing client side Renderer as in https://github.com/vaadin/framework/tree/8.1/client/src/main/java/com/vaadin/client/renderers then try to use some other element than VVerticalLayout I believe Vaadin layouts handle click event through their abstract component base class. Maybe using simple div element or such would work. – Mika Oct 30 '17 at 13:27
  • @Mika Sure. I will add as soon as i have spare time to return to this project. I remember i ran out of time last time when trying to find out how to catch layout click and forward it somehow. – pirho Oct 30 '17 at 13:30
  • Update: This might have been fixed in Vaadin 8.3.0 release. – pirho Feb 01 '18 at 13:32

2 Answers2

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);
pirho
  • 11,565
  • 12
  • 43
  • 70
1

see the following issue https://github.com/vaadin/framework/issues/10425. as tsuoanttila said the solution is to invoke column.setWidgetEventsAllowed(true); so you do not need an AbstractLayout wrapper nor a LayoutClickListener.

tremendous7
  • 721
  • 6
  • 9