TreeView - Want to Focus/ExpandTo/ScrollTo a node into View

[Chris]

I have the native TreeView component and I am wanting to scroll a pre-defined node into view. I do not see any methods available on the component that allows me to do so, and I do not see any documentation around this particular issue.

Outside of me using DOM selectors to find the node and force the container of the tree to scroll to it, does Kendo provide a method or guide for how to achieve this?

[Konstantin Dikov]

Hi Chris,

Thank you for contacting us.

The TreeView has "setFocus" method that uses the hierarchical index of the items to focus them. However, focusing the item with setFocus will just add the focused state to the item for the keyboard navigation and will not scroll the view to the item. You can use the focused state to get the reference to the DOM element and use its "scrollIntoView" method. For your convenience, following is an example demonstrating such implementation:

• https://stackblitz.com/edit/ncykqj?file=src%2Fmain.vue

Note that I have disabled the "animate" property of the TreeView, so that the item can be rendered immediately. If you want to keep the animation you will have to set 250 milliseconds (or higher value) for the setTimeout function.

If further questions arise, please do not hesitate to contact us again.

 

Regards,
Konstantin Dikov
Progress Telerik

[Chris]

I originally wanted to go this route before asking the question, but ran into a few issues.

I don't know the Hierarchal Index of the item in question. I only know the `id` of the item, not a value assigned by the `TreeView`. I tried using the `focus-id-field` prop to set the field to `id` and then use `treeRef.focus('someIdValue')`, but that never seems to focus the element.

It appears that the `focus` method will only accept a `hierarchalIndex`.

How am I suppose to get this value?

I'm also having to manually expand each parent of the focused tree node before I can find the DOM element to scroll to. I was hoping there might be some sort of `expandTo` feature.

How am I suppose to expand all the parent nodes up the chain?
I have a version of all of this working right now, but it feels hacky. I currently iterate over each node up the chain and expand it, then I perform a `querySelector` on a custom data attribute within the template slot to find the node, then I scroll the parent container down to the node.

[Konstantin Dikov]

Hi Chris,

For getting the hierarchicalIndex you will have to recursively go through the items and create it. I have modified the previous example by adding such custom function:

• https://stackblitz.com/edit/ncykqj-yjvdku?file=src%2Fmain.vue

As for expanding the items, once you have the hierarchicalIndex you can split it by "_" and use each of the indexes of the parent items to set their "expanded" field to "true"

Hope this helps.