New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Scrolling to a Node When Page First Loads

To scroll a node into view when the page first loads:

  1. Get the client-side instance of the RadTreeView object.

  2. Get the selected node by using the get_selectedNode() client-side function of the RadTreeView class.

  3. Make the selected node visible by using scrollIntoView() function of the RadTreeNode class.

  4. Set the Height of the RadTreeView to make the scrollIntoView() method work.

In the code below we are using the pageLoad() function. This is a native ASP.NET AJAX function that is automatically fired once all ASP.NET AJAX controls (including RadControls for ASP.NET AJAX) are loaded on the page. More information on the subject is available here.

<body>
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>

        <script type="text/javascript" language="javascript">
            function pageLoad() {
                var tree = $find("<%= RadTreeView1.ClientID %>");
                var selectedNode = tree.get_selectedNode()
                if (selectedNode != null) {
                    window.setTimeout(function() { selectedNode.scrollIntoView(); }, 200);
                }
            }
        </script>

        <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" Width="150" Height="200">
            <Nodes>
                . . . other nodes
                <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Selected Node"
                    Selected="true">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    </form>
</body>

See Also

In this article