TreeGrid enable to select parent item by clicking on it

Flow
1

Hello,

about TreeGrid…

When I click an item on a treeGrid that has children, it expands the item but does not selects it
In my case I would like to select the item also

I use the TreeGrid as a left menu and I need to select while expanding
how could I do this?

Is there some better other option for tree menu ?
I see that there is no TreeView any more

2

Hi Yogos, Did you able to find a solution for this?

3

Hello, no I abandoned TreeGrid for the this case

4

The selection doesn’t work because the <vaadin-grid-tree-toggle> element calls preventDefault() on click events. This element wraps the toggle-button and other content in the cell. It’s still possible to select the row by clicking on other cells, or at the edges of the cell with the toggle-button.

A bit dangerous workaround for this would be to override the client-side click handler without using preventDefault():

addAttachListener(e -> e.getUI().getPage().executeJavaScript(
  "customElements.get('vaadin-grid-tree-toggle').prototype._onClick=function(e){if(!this.leaf)this.expanded=!this.expanded;}"));
5

@Pekka Maanpää:
Frankly - I consider the fact that one needs to divert to such hacks a severe usability bug of TreeGrid! And I am apparently not alone!

But nevertheless: I am currently hacking up a private tool where I would like to use Vaadin and I would be willing to apply such a hack (in favor of having to “re-invent” something like TreeGrid which I would consider a total overkill - in that case I would rather abandon Vaadin alltogether).

So - where and how would one need to apply the above hack? On which object would one have to call this addAttachListener(…)?

6

Hi! I see that you found [the GitHub issue]
(https://github.com/vaadin/vaadin-grid/issues/1934) and the better workaround provided there.

But for the reference, I wrote that ugly workaround a long time ago so can’t remember exactly my point with the attach listener, but I guess it is there just to make sure that an UI is available. It could be called for the view that has the TreeGrid, or even for the TreeGrid itself. The JavaScript needs to run only once, but it doesn’t matter if it runs multiple times.

7

Yes - I did and sorry for not coming back to this thread and telling that I found a solution.
With that in place my view now really rocks!

Regards,
Michael