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?
Can someone help me? Can you please provide some sample code?
5 Answers, 1 is accepted
0
Hello Duy,
Here is how you can scroll to the expanded node - add the following code to the NodeExpand event handler:
Note that for the above to work you need to set the Height property of the treeview.
Regards,
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.
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.
Regards,
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.
0
Duy
Top achievements
Rank 1
answered on 14 Jul 2009, 03:30 PM
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.
0
Duy
Top achievements
Rank 1
answered on 15 Jul 2009, 03:10 PM
Is there no way of having the page scroll to the last expanded node without setting a treeview height?
0
Rick
Top achievements
Rank 1
answered on 17 May 2012, 01:43 PM
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?
0
Hello Rick,
Plamen Zdravkov
the Telerik team
You can use the scrollIntoView function of the RadTreeNode client object as it is shown in this documentation article.
Hope this will be helpful.
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.