ItemClickListener not working for GridPro on editable cell

Hi,

We use GridPro and need to recognise when the user selects a row so we can display more details.

In Grid I regularly use ItemClickListener or SelectionListener, but these do not seem to work in GridPro when it is an editable column.

Any thoughts?
Am I doing something wrong?
Is there another approach to recognise when a row is selected?

// works OK for Grid or GridPro on non editable columns ...
grid.addItemClickListener(clk->{
    logger().warning("### CLICKED ### "+clk.getItem());
});

However for GridPro when clicking in an editable column this does not work …

// is NOT fired if clicking a column with edit component
gridPro.addItemClickListener(clk->{
    logger().warning("### THIS-IS-NOT-FIRED ### "+clk.getItem());
});

Any suggestions hugely appreciated.
Thx.

I think this is expected as the click is taken by the edit component.

This is a bit related to discussion here: https://github.com/vaadin/vaadin-grid-flow/issues/742 I.e. in TreeGrid there is expand/collapse toggle that takes the click too.

Hi Tatu,

Many thanks for your response.

Yes, it makes sense that the editing component consumes the event. (as happened in Swing)

I have a few months experience with Vaadin now, but no previous experience in the web world (Javascript/CSS/Element etc etc etc). I have some idea but I do not know all the tricks!

Do you have any suggestions for possible alternate ways around this?
Maybe there is some Element I can monitor that might help me recognise when a row is selected or focused or similar?
Perhaps access to the editing component so I can listen to events on there?

The Grid itself know these events are happening because it transfers focus etc.

Again … I appreciate your response.

Any update on this? I am running into the same problem. Any workaround would be nice.

A potential solution: https://github.com/vaadin/vaadin-grid-pro/issues/73#issuecomment-589597046
The hack to make it work:

        addAttachListener(a -> {
			getElement().executeJs("this.addEventListener('click', function(e) {this._enterEditFromEvent(e)} )");
        });
        addItemClickListener(e -> {
			getEditor().editItem(e.getItem());
        });