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

1 Answer 38 Views
TreeView
Chris
Top achievements
Rank 1
Chris asked on 19 Jan 2024, 12:46 PM

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?

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 22 Jan 2024, 09:28 AM

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:

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

Chris
Top achievements
Rank 1
commented on 22 Jan 2024, 02:31 PM

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
Telerik team
commented on 25 Jan 2024, 08:51 AM

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:

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.

 

Tags
TreeView
Asked by
Chris
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or