RadTreeView for ASP.NET
Table of Contents
Scrolling To The selected node Send comments on this topic.
See Also
Example scenarios (How to) > Client -side > Scrolling To The selected node

Glossary Item Box

Goal: Scroll to the selected node on the client-side.

  1. Get the client-side instance of the treeview object:

    Copy Code
    var treeviewInstance = <%RadTreeView1.ClientID %>;
  2. Get the selected node by using the SelectedNode client-side property of the RadTreeView class:

    Copy Code
    var selectedNode = treeviewInstance.SelectedNode;
  3. Make the selectedNode HTML element visible by using ScrollIntoView() method of the RadTreeNode class:

    Copy Code
    window.setTimeout(function() { selectedNode.ScrollIntoView(); }, 200);
  4. Wire the body onload event with a timeout handler that calls a javascript function:

    Copy Code
    <body onload="setTimeout('ScrollToSelectedNode()', 20);">
    The timeout is needed since the height of the treeview is set to 0 just after the body onload event fires. 

Example:

ASPX:

Copy Code
<script language="javascript">
  function ScrollToSelectedNode()
  {
       var treeviewInstance = <%=RadTreeView1.ClientID %>;
       var selectedNode = treeviewInstance.SelectedNode;
       if (selectedNode != null)
       {
          window.setTimeout(function() { selectedNode.ScrollIntoView(); }, 200);
       }
  }
</script>

<body onload="setTimeout('ScrollToSelectedNode()', 20);">
    <form id="Form1" method="post" runat="server">
        <rad:radtreeview
            width="150"
            height="200"
            id="RadTreeView1"
            runat="server"/>
    
</body>

See Also