Tree component in Vaadin Flow?

Flow
1

The documentation for Vaadin 10 indicates there is no replacement for the Tree component available in versions 7 and 8.
How am I supposed to migrate my application, which uses Trees as a key component?
I would love to migrate to Flow due to its performance, flexibility, and, especially, its accessibility features.
But it looks like Vaadin is not offering yet a clear migration path…
Assuming it is relatively easy to wrap an existing JS library, why is Vaadin not offering a Tree implementation based on a third party JS library?

Thanks,

2

Hi Reuben. You’re right, there is no built-in Tree component Java integration yet in versions 10 or 11. But a TreeGrid component is already available in vaadin-grid-flow 1.1.0, and it will be included in Vaadin 12 in December 5th (beta in 7th of November).

You can follow the instructions on [this blog post]
(https://vaadin.com/blog/using-new-features-with-the-lts-version-case-treegrid) for taking the component in use in V10 or V11, or you can take the Vaadin 12.0.0.alpha1 (there is alpha2 later this week which is even better).

You can use a single column TreeGrid as your Tree to get started. You’ll need to remove the header though and some other styling to make it look more “tree-like”. We will try to add an example of this later on before final release of Vaadin 12. The “standalone” Tree component still needs a bit more work to make the UX with eg. keyboard navigation work seamlessly like in previous framework versions, and unfortunately it looks like the earliest we’ll get to it will be to ship in in Vaadin 13 on beginning of March 2019.

I hope this helps, and if it does, please give feedback on how the TreeGrid is working for you.

3

Hi Pekka, thanks for the tip. I did manage to update to grid-flow 1.2.1, and now I am trying to figure out how to initialize the ‘tree’. Looks are not important at this point in my project.

4

All working fine now.
One more question: my application requires the ability to select any tree node, not just leafs.
The TreeGrid is presently not allowing me to select a non-leaf.
Can you recommend a way around it?

Thanks

5

Actually it does let me select a non-leaf but only if I click far to the right, as otherwise it just expands the node…