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

Проблема в том, что код не реагирует на клики по фактическому изображению, только снаружи. Вы можете увидеть это ниже. Есть идеи, можно ли сделать изображение кликабельным?

введите здесь описание изображения


vaadin vaadin-grid vaadin8
person benstpierre    schedule 05.12.2017    source источник
comment
Можете ли вы проверить, установлено ли для изображения свойство CSS pointer-events? Возможно, это предотвращает событие click. В качестве альтернативы вы можете использовать столбец компонентов и обрабатывать все самостоятельно.   -  person Steffen Harbich    schedule 05.12.2017

Ответы (1)


arrow_upward
5
arrow_downward

Вам также нужно добавить прослушиватель кликов в 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 ...
}

Вы можете увидеть рабочий пример здесь: https://github.com/alejandro-du/community-answers/tree/master/click-image-in-grid

person Alejandro Duarte    schedule 07.12.2017