如何点击瓦丁8网格中网格单元格中的组件来选择单元格行？

Question

单击包含< code>VerticalLayout行等组件的Vaadin 8 网格中的单元格时，不会选中该行(使用Vaadin 8.1.5)。

如果组件未填充整个单元格，则单击单元格中未使用的区域会使该行处于选中状态。

我一直在研究如何将点击组件转发到单元格点击侦听器，但尚未对此有任何控制。猜猜这甚至不是最好的方法。

解决方案是什么？

Answer 1

请参阅以下问题 https://github.com/vaadin/framework/issues/10425。正如 tsuoanttila 所说，解决方案是调用列.setWidget事件允许（true）; 所以你不需要抽象布局包装器，也不需要布局点击列表器。

Answer 2

我提供了我自己的当前解决方案，作为不弄乱问题的答案和单独的可能评论。这个特定的解决方案并不完美——例如多选处理不正确——但它只是为了给出我决定如何处理这个问题的想法。

我们的想法是扩展一个值提供者，使它拥有一个对网格的引用，它为网格生成值。前面提到过——除了生成网格列组件之外——在组件中添加了click listener。

在这个包中，单击一个组件，有对网格和行项目的引用，所以选择/取消选择非常容易。

@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;
    }

}

如果有人感兴趣：在这个测试代码中GridEntity。isValid（）只返回随机布尔值，用于从以下样式中进行选择：

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

添加到网格中就像这样:

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