Tree navigation

I would like to ask if is possible in Vaadin Flow create a tree navigation similar to the image.
Nodes should fetch data lazy after expansion.
There should be a list of objects e.g. Schools and each node could have sub-nodes like teachers, classes… which can be different types than school.
Sub-nodes will fetch other sub-nodes e.g. teacher can show all students etc.
On the rights side will be detail view of node (e.g list of items or some fields- teacher name, surname, address…)
Thank you.

I use a TreeGrid for that purpose

Thank you. I was looking on it before (quickly) but there is note: “Tree Grid isn’t meant to be used as a navigation menu” and also it looks to me that all elements needs to be in the same type. Did you please “unify” all your nodes into one object type? Is it works for you fine? Was you able also do "lazy loading of node? "

I use a class TreeNode that holds different types of nodes

and yes lazy loading works with the callback dataprovider

great, then I will take a look on it. Thank you. Is there maybe some example of code of that?

that is helpful. Thank you. Could you please also share your idea with " TreeNode that holds different types of nodes". It is that generic class?

It’s discouraged to use a tree grid for a navigation tree because it’s not accessible. For example the keyboard shortcuts are not working as "expected ". But there is no build-in component for a tree.

If you want to use different types of backend items, you can probably use a generic interface with only the needed information ( probably a name , Id, maybe type).

@adaptable-uakari do you please use com.fasterxml.jackson.core.TreeNode? or some custom class/interface? Could you please provide an example of how you deal with different types? Thank you

No TreeNode is my own class that provides the attributes you want to display in the tree. And holds the refrence to the types

in this case I’m not sure if I would even describe this as navigation. By “navigation” we typically mean navigating between separate views of the application, that you would typically do with links. But this is more like a master-detail view with a hierarcical tree as the master list.

The main problem with using TreeGrid for navigation is really that grid rows are not semantically links, so it’s unexpected (e.g. for a screen reader user) that they would navigate you to another view. Row selection with keyboard should work accessibly in V23 unless I’m mistaken.

thank you

I used treeGrid as “master detail”.
I used also AbstractBackEndHierarchicalDataProvider to fetch data lazily.

If I expand some nodes, then scroll down to fetch more data and then scroll back. Then all nodes are collapsed.
I need to keep them in the same state as before scrolling.

Is any way to keep node state please?

Would be maybe easier to use hilla or it is the same?