VaadinグリッドItemClickListenerは、私が長いノートを読み出すポップアップダイアログを開き、クリック可能なアイコンを表示するようになっている次のコードを持っているImageRenderer

Question

でカラムのクリックを登録するには失敗しました。

 this.capacityCommentColumn = this.facilityGrid.addColumn(
        p -> { 
         if (Strings.isNullOrEmpty(p.getCapacityComment())) { 
          return null; 
         } else { 
          return new ThemeResource("img/note.svg"); 
         } 
        }, 
        new ImageRenderer<>()) 
        .setWidth(80) 
        .setCaption("Note"); 

     this.facilityGrid.addItemClickListener(new ItemClickListener<MapQueryService.RowResult>() { 
      @Override 
      public void itemClick(Grid.ItemClick<MapQueryService.RowResult> event) { 
       if (event.getColumn() == capacityCommentColumn && !Strings.isNullOrEmpty(event.getItem().getCapacityComment())) { 
        final NoteWindow noteWindow = new NoteWindow(); 
        noteWindow.txtDescription.setValue("test"); 
        noteWindow.show(); 
       } 
      } 
     }); 

問題は、コードが実際の画像のクリックに反応しないことです。外部でのみ発生します。あなたはこれを以下で見ることができます。イメージをクリック可能にできるかどうかは任意です

Answer 1

あなたにもRendererにクリックリスナを追加する必要があります。たとえば：

Grid<Integer> grid = new Grid(); 

private void addIconColumn() { 
    ImageRenderer<Integer> renderer = new ImageRenderer<>(); 
    renderer.addClickListener(e -> iconClicked(e.getItem())); // allow clicks on the image 

    Grid.Column<Integer, ThemeResource> iconColumn = grid.addColumn(i -> new ThemeResource("img/icon.svg"), renderer) 
      .setCaption("Icon"); 

    grid.addItemClickListener(e -> { // allow clicks on the cell 
     if (iconColumn.equals(e.getColumn())) { 
      iconClicked(e.getItem()); 
     } 
    }); 
} 

private void iconClicked(Integer i) { 
    ... your UI logic here ... 
} 

あなたはここで働い例を見ることができます：画像上のCSSプロパティ `ポインタevents`セットがあるかどうhttps://github.com/alejandro-du/community-answers/tree/master/click-image-in-grid