2017-12-05 19 views
3

다음 코드는 긴 노트를 읽는 팝업 대화 상자를 여는 클릭 가능한 아이콘을 표시합니다.Vaadin Grid ItemClickListener가 ImageRenderer를 사용하여 열 클릭을 등록하지 못했습니다.

 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(); 
       } 
      } 
     }); 

문제는 코드가 실제 이미지의 클릭에 응답하지 않으며 외부에서만 나타납니다. 아래에서 확인할 수 있습니다. 어떤 아이디어라도 이미지를 클릭 할 수있게 할 수 있다면 어떨까요?

enter image description here

+0

가 확인할 수 있습니까? 아마 이것은 클릭 이벤트를 방지합니다. 또는 구성 요소 열을 사용하고 직접 처리 할 수 ​​있습니다. –

답변

3

당신은뿐만 아니라 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