Vaadin Grid ItemClickListener fails to register clicks on column with ImageRenderer

Question

I have the following code which is supposed to show a clickable icon which opens a popup dialog reading out a lengthy note.

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

The problem is the code does not respond to clicks on the actual image, only on the outside. You can see this below. Any idea if its possible to make the image clickable?

Answer 1

You need to add a click listener to the Renderer as well. For example:

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 ...
}

You can see a working example here: https://github.com/alejandro-du/community-answers/tree/master/click-image-in-grid