Moving the ScrollBar To the Selected Node In A TreeView Control

Question

I have a treeview control where I am dynamically selecting a node depending on user interaction. when a node is selected I want to be able to have the scrollbar go to the location of that selected node in the tree. The scrollbar is simply made by overflow:auto in the div tag where the treeview is located. Can someone give me some detailed code to accomplish this? Thanks in advance.

Answer 1

If the scrollbar is a browser default triggered by overflow:auto, you'll probably need to use javascript. See if the answer below works for you:

Programmatically scroll to an Anchor Tag

In other words, you will need to figure out the ID of the selected node (or insert an element with an ID into the text of the node), then insert a snippet of javascript into the page (using, for example, a Literal control) that will scroll to that element when the page is loaded.

It's hard to give specific examples without seeing your code, but let's say your selected node is called ActiveNode and you've inserted a literal control called litScript. Then you could do something like this:

ActiveNode.Text = ActiveNode.Text & "<a id='TVSelectedNode'></a>" 
litScript.Text = "<script type='text/javascript'>document.getElementById('TVSelectedNode').scrollIntoView(true);</script>"