Making A ScrollBar Go To Selected Record In TreeView ASP.Net

Question

I have a treeview control that gets populated at runtime with a pyramid of employee names. I put the css scrollbar on the view by putting overflow:auto" in the tag where the treeview is located. The users are now asking me to to have the scrollbar go down in the treeview where a treeview item is selected.

How do I make a scroll bar to go to a place where the treeview has been selected?

Note: treeView1.SelectedNode.EnsureVisible();

is not available in asp.net need another way.

Answer 1

You'll need some custom javascript and some code-behind. Start by using the JS method found here to get the Client ID of a treenode:

function GetTreeNodeID(nodeTooltip)
{
    var tree = document.getElementById(TreeView.ClientID); // Change TreeView ClientID.
    var treeLink =  tree.getElementsByTagName('A');    

    for(var element in treeLink)
        if((nodeTooltip == treeLink[element].title) && (treeLink[element].title != ""))                      
            return treeLink[element].id;
}

Then in your code-behind, you can register a startup script to scroll your div to the treenode using the scrollIntoView() javascript method:

Dim script As String = String.Format("var treeNode = GetTreeNodeID('{0}');  treeNode.scrollIntoView();", myTreeNode.Tooltip)
Page.ClientScript.RegisterStartupScript("scrollScript", script)

Answer 2

The follwoing JavaScript should help:

var selected = document.getElementById(node_id);
if (selected) {
   selected.scrollIntoView(true);
}

If selecting the node would trigger a postback, than try:

<%@ Page Title="" Language="C#" MaintainScrollPositionOnPostback="true"