-NODE A
- NODE AA
- NODE BB
|
|
|
|
|
|
|
+NODE B
AFTER CLICK
+NODE A
|
|
|
|
|
|
|
-NODE B
-NODE BB <-------- SCROLL TO THIS NODE
When I click on node on treeview, from the server side node Click event I want to find a given node like this.
VarNode = RadTreeView2.FindNodeByValue("31138") and if it has children I expand it and select the leaf.
Then what I cannot achieve is to scroll to the selected node
Any idea?
Thanks
Thanks
10 Answers, 1 is accepted
You can use scrollIntoView function.
Please take a look into the following help article which explains more on this.
Scrolling to a Node when Page first loads.
Thanks,
Princy.
I've already tested what you suggested but it was not working from server side. below this is the code
please take a look.
ASPX
<script type="text/javascript">
function ScrollToSelectedNode() {
var treeview = $find('<%=RadTreeView2.ClientID %>'); <-------- HERE treeview is always null
var node = treeview.get_selectedNode(); //
var nodeElement = node.get_element();
nodeElement.scrollIntoView();
}
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="divLoading">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="divLoading" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
....
<telerik:RadTreeView ID="RadTreeView2" runat="server" Width="100%" Height="100%"
sort="Ascending" OnClientNodeClicking="ClientNodeClicking" SingleExpandPath="true"
ExpandOnSingleClickEnabled="false" CssClass="TreeView"
DataFieldID="ID" DataFieldParentID="ParentID" OnNodeExpand="RadTreeView2_NodeExpand"
DataTextField="Text" OnNodeClick="RadTreeView2_NodeClick"
DataValueField="ID" >
<DataBindings>
<telerik:RadTreeNodeBinding Expanded="true" />
</DataBindings>
</telerik:RadTreeView>
ASPX.VB
Protected Sub RadTreeView2_NodeClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs)
...
node = RadTreeView2.FindNodeByValue("31138") ' Locate an existing node by value
node.Selected = True
If node.HasControls() = False Then ' expand this node
Dim e0 As Telerik.Web.UI.RadTreeNodeEventArgs
e0 = New Telerik.Web.UI.RadTreeNodeEventArgs(node)
RadTreeView2_NodeExpand(node, e0)
ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "scrollToselectedNode", "ScrollToSelectedNode();", True)
End If
End Sub
Thanks
Madjid.
If you are using update panel on the initial load you can refer to this help article.
Hope this will be helpful.
Kind regards,
Plamen Zdravkov
the Telerik team
Not working.
When I click on a node on a treeview (let’s say see nodeA) I want from server side (node click event) to scroll to a nodeA.
1) finding and selecting the node <----------- it's ok
2) ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "scrollToselectedNode", "ScrollToSelectedNode();", True) <----- OK
<script type="text/javascript">
function ScrollToSelectedNode() {
var treeview = $find('<%=RadTreeView2.ClientID %>'); <-------- HERE treeview is always null
var node = treeview.get_selectedNode(); //
var nodeElement = node.get_element();
nodeElement.scrollIntoView();
}
</script>
Please how can I do this?
Thanks,
Madjid.
You cannot find the tree with this method and will have to use the Client event onClientNodeClicking like in this code:
function
OnClientNodeClicking(sender, args) {
var
tree = $find(
"<%= RadTreeView1.ClientID %>"
);
var
selectedNode = tree.findNodeByText(
'Support'
);
if
(selectedNode !=
null
) {
window.setTimeout(
function
() { selectedNode.scrollIntoView(); }, 200);
}
}
If you need to do some functionality on the server side after that you trigger an AjaxRequest.
Best wishes,
Plamen Zdravkov
the Telerik team
I think the method "OnClientNodeClicking" will be called before pageload. How could we scroll to the selected node after pageload? I tried to call script from server side, but the tree view cannot be found. Do you know why?
Client side:
function scrollToTreeViewNode() {
var treeview = $find("<%= radTreeViewResources.ClientID %>");
if (treeview != null) {
var treeNode = treeview.findNodeByValue(document.getElementById('<%= hiddenSelectedTreeViewNode.ClientID%>').value);
if (treeNode != null) {
var nodeElement = treeNode.get_element();
nodeElement.scrollIntoView();
}
}
}
Server side:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!IsPostBack)
{
}
else
{
string script = "<script language=\"javascript\">scrollToTreeViewNode();</script>";
ScriptManager.RegisterStartupScript(updatePaneResourceAssignment, typeof(UpdatePanel), "scrollToTreeViewNode", script, false);
}
}
Alex
Now, I could get the tree view but the scrollIntoView does not work for my codes. All the codes could be executed but nothing happens. Do you know why?
function OnClientNodeClicking(sender, args) {
var selectedNode = document.getElementById(
'<%= hiddenSelectedTreeViewNode.ClientID %>'
)
var treeNode = args.get_node();
if
(treeNode !=
null
) {
var nodeElement = treeNode.get_element();
window.setTimeout(function () { $telerik.scrollIntoView(treeNode); }, 6000);
//window.setTimeout(function () { $telerik.scrollIntoView(nodeElement); }, 6000);
}
}
the code that you pasted looks quite unusual than the one I shared -would you please explain if your scenario is somehow different.
Please make sure as well that you are trying to scroll the TreeView's scroll and not the scroll of some outer container.
Plamen
the Telerik team
Yes, my scenario is that I want to scroll to the current selected node and my node text maybe the same.
I have used "findNodeByValue" to find the exact node but failed. Now I could only get the node by args.get_node();
var treeNode = args.get_node();
I don't know whether I have to scroll of outer container update panel or just the tree view. I just want to scroll to the selected tree view node. Here are my aspx codes. Could you give me some comments? I just want to scroll to the selected tree view node.
<
asp:UpdatePanel
ID
=
"updatePaneResourceAssignment"
runat
=
"server"
UpdateMode
=
"Conditional"
>
<
ContentTemplate
>
<
div
class
=
"formList resourceRadioButtons"
>
<
ul
>
<
li
><
asp:Label
ID
=
"labelTitle"
runat
=
"server"
></
asp:Label
></
li
>
<
li
><
asp:RadioButton
ID
=
"radioButtonAllResources"
runat
=
"server"
/></
li
>
<
li
><
asp:RadioButton
ID
=
"radioButtonSelectResources"
runat
=
"server"
/></
li
>
</
ul
>
</
div
>
<
asp:Panel
ID
=
"panelResources"
runat
=
"server"
>
<
div
id
=
"selectedResourcesList"
>
<
telerik:RadTreeView
ID
=
"radTreeViewResources"
runat
=
"server"
/>
</
div
>
<
div
id
=
"selectedResourcesButtons"
>
<
asp:Button
ID
=
"buttonSelectAll"
runat
=
"server"
CssClass
=
"button"
/>
<
asp:Button
ID
=
"buttonSelectNone"
runat
=
"server"
CssClass
=
"button"
/>
</
div
>
</
asp:Panel
>
<
input
id
=
"selectedScheduleID"
type
=
"hidden"
runat
=
"server"
/>
<
input
id
=
"hiddenSelectedScheduleType"
type
=
"hidden"
runat
=
"server"
/>
</
ContentTemplate
>
</
asp:UpdatePanel
>
Alex
You can refer to this help article where this scenario have been described. Please have in mind that the Height property of RadTreeView is set-otherwise the scroll itself won't event show.
Hope this will explain the issue.
Plamen
the Telerik team