Scrolling To Last Expanded Node

6 posts, 0 answers
  1. Duy
    Duy avatar
    18 posts
    Member since:
    Nov 2008

    Posted 13 Jul 2009 Link to this post

    I have a treeview that is built on demand. When the user expands a node, that branch is dynamically built. The ExpandMode is set to "TreeNodeExpandMode.ServerSide." The problem I am having is that when the user clicks to expand a node, the page does a postBack and the window is refreshed with the top of the tree being displayed. The user will then have to scroll down to the node that they expaned to see the rest of the branch. I want the page to scroll to the last expanded node the user clicked on. I tried getting the selected node using var selectedNode = tree.get_selectedNode() but that returns null because the user has not actually selected a node. They have only expanded a node.  How can I do this if the treeview.SelectedNode has no setter?

    Can someone help me? Can you please provide some sample code?
  2. Veselin Vasilev
    Veselin Vasilev avatar
    2992 posts

    Posted 14 Jul 2009 Link to this post

    Hello Duy,

    Here is how you can scroll to the expanded node - add the following code to the NodeExpand event handler:

        protected void tv1_NodeExpand(object sender, RadTreeNodeEventArgs e) 
            e.Node.Nodes.Add(new RadTreeNode("child")); 
            //scroll to the expanded node 
            string script = "Sys.Application.add_load(function(){var tree = $find('" + tv1.ClientID + "');"
            script += "var node = tree.findNodeByText('" + e.Node.Text + "'); node.scrollIntoView();});"
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "scroll", script, true); 

    Note that for the above to work you need to set the Height property of the treeview.

    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Duy
    Duy avatar
    18 posts
    Member since:
    Nov 2008

    Posted 14 Jul 2009 Link to this post

    I don't know if this is the right solution. I have the treeview in a modal window. I was able to get the treeview to scroll to the expanded node. But now that the height property is set, if the tree is expands vertically longer (or higher in height) than the property size, the user will have to use the scroll bar for the treeview AND the scroll bar of the RadWindow. Yes, the script scrolls the treeview position to the expanded node, but the user will still have to scroll the RadWindow down in order to see the nodes on the bottom.

    I guess what I want is that the page loads with the PAGE scrolled to the expanded node without having to worry about the height of the treeview. Ideas?

    Thanks for your help.
  4. Duy
    Duy avatar
    18 posts
    Member since:
    Nov 2008

    Posted 15 Jul 2009 Link to this post

    Is there no way of having the page scroll to the last expanded node without setting a treeview height?
  5. Rick
    Rick avatar
    2 posts
    Member since:
    Jul 2011

    Posted 17 May 2012 Link to this post

    This doesn't work for my implementation either. I have a radtreeview populated by a sql datasource and each time the expanded button is clicked, the tree scrolls to the top. I do have the height property set. Is there any other property I should check or workaround I should implement so that when the expand button is clicked that the tree node remains in view?
  6. Plamen
    Plamen avatar
    3047 posts

    Posted 22 May 2012 Link to this post

    Hello Rick,

    You can use the scrollIntoView function of the RadTreeNode client object as it is shown in this documentation article.

    Hope this will be helpful.

    Kind regards,
    Plamen Zdravkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top