Rank 1
During the Page_Load function where ! Page.IsPostBack I load my treeview using the Enumerable logic with a NodeDataBound customization. These 2 processes set up my treeview with a parent/child relationship along with setting up attributes and the correct contextmenus. Later down in the code I have the following code to see if the user passed in a value to have auto-selected on the treeview.
If
Request("eid") <> "" Then
Dim nodeSelected As RadTreeNode = rtvEventList.FindNodeByValue(Request("eid"))
nodeSelected.Selected =
True
Dim js As String = "ScrollToSelectedNode();"
RadScriptManager.RegisterStartupScript(Page, Page.[GetType](), "nodeSelection", js, True)
End If
The node is selected and page is filled out correctly. The function ScrollToSelectedNode() is called.
function ScrollToSelectedNode()
{
var treeviewInstance = <%=rtvEventList.ClientID %>;
var selectedNode = treeviewInstance.SelectedNode;
if (selectedNode != null)
{
window.setTimeout(
function() { selectedNode.ScrollIntoView(); }, 200);
}
}
It seems that the treeviewInstance has as object, but I keep getting errors that the SelectedNode of the treeviewInstance is null. So the page will not scroll the treeview to the correct node. What am I doing wrong?
6 Answers, 1 is accepted
You can find the TreeView client object using the $find function. Here is a nice article that should give you a better idea on the basics of the Client-side api of RadTreeView: http://www.telerik.com/help/aspnet-ajax/treeview-client-basics.html
Having the treeView instance, you can retrieve the selected node by the treeView.get_selectedNode() function of RadTreeView client object. Here is a helpful page with the current state of the client-side api of RadTreeView: http://www.telerik.com/help/aspnet-ajax/treeview-client-objects-radtreeview.html
I hope this is helpful for you!
Regards,
Nikolay Tsenkov
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Rank 1
When I put in my code the first line
var tree = $find("<%= RadTreeView1.ClientID %>");
my tree object is null.
I know it is on my form and is named RadTreeView1.
Any suggestions?
And where exactly is this line located?
Could you, please, post an example so I can resolve the issues in it?
My guess is that the line you search for the TreeView in, is been executed before the client object is created.
There will be no need for guessing when I have the code and I will do my best to resolve the problem once you provide with the sample.
Regards,
Nikolay Tsenkov
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Rank 1
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TelerikTreeView.WebForm1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
/* <![CDATA[ */
function onNodeDragging(sender, args)
{
var target = args.get_htmlElement();
if(!target) return;
if (target.tagName == "INPUT")
{
target.style.cursor = "hand";
}
}
function dropOnHtmlElement(args)
{
if(droppedOnInput(args))
return;
if(droppedOnGrid(args))
return;
}
function droppedOnGrid(args)
{
var target = args.get_htmlElement();
while(target)
{
target = target.parentNode;
}
args.set_cancel(true);
}
function droppedOnInput(args)
{
var target = args.get_htmlElement();
if (target.tagName == "INPUT")
{
target.style.cursor = "default";
target.value = args.get_sourceNode().get_text();
args.set_cancel(true);
return true;
}
}
function dropOnTree(args)
{
var text = "";
if(args.get_sourceNodes().length)
{
var i;
for(i=0; i < args.get_sourceNodes().length; i++)
{
var node = args.get_sourceNodes()[i];
text = text + ', ' +node.get_text();
}
}
}
function clientSideEdit(sender, args)
{
var destinationNode = args.get_destNode();
if(destinationNode)
{
var firstTreeView = $find('RadTreeView1');
firstTreeView.trackChanges();
var sourceNodes = args.get_sourceNodes();
for (var i = 0; i < sourceNodes.length; i++)
{
var sourceNode = sourceNodes[i];
sourceNode.get_parent().get_nodes().remove(sourceNode);
if(args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);
if(args.get_dropPosition() == "above") insertBefore(destinationNode, sourceNode);
if(args.get_dropPosition() == "below") insertAfter(destinationNode, sourceNode);
}
destinationNode.set_expanded(true);
firstTreeView.commitChanges();
}
}
function insertBefore(destinationNode, sourceNode)
{
var destinationParent = destinationNode.get_parent();
var index = destinationParent.get_nodes().indexOf(destinationNode);
destinationParent.get_nodes().insert(index, sourceNode);
}
function insertAfter(destinationNode, sourceNode)
{
var destinationParent = destinationNode.get_parent();
var index = destinationParent.get_nodes().indexOf(destinationNode);
destinationParent.get_nodes().insert(index+1, sourceNode);
}
function onNodeDropping(sender, args)
{
var dest = args.get_destNode();
if (dest)
{
dropOnTree(args);
}
else
{
dropOnHtmlElement(args);
}
}
function onClientContextMenuItemClicking(sender, args)
{
var menuItem = args.get_menuItem();
var treeNode = args.get_node();
menuItem.get_menu().hide();
switch(menuItem.get_value())
{
case "AddNode":
document.frmEventsList.hidProcessMenu.value = true;
break;
case "NewEvent":
document.frmEventsList.hidProcessMenu.value = true;
break;
case "MoveToMV":
document.frmEventsList.hidProcessMenu.value = true;
break;
case "DeleteNode":
var result = confirm("Are you sure you want to delete the node: " + treeNode.get_text());
document.frmEventsList.hidProcessMenu.value = result;
break;
case "DeleteEvent":
var result = confirm("Are you sure you want to delete the Event: " + treeNode.get_text());
document.frmEventsList.hidProcessMenu.value = result;
break;
}
}
function ScrollToSelectedNode()
{
var treeviewInstance = <%= RadTreeView1.ClientID %>;
var selectedNode = treeviewInstance.SelectedNode;
if (selectedNode != null)
{
window.setTimeout(function() { selectedNode.scrollintoview(); }, 200);
}
}
/* ]]> */
</script>
</telerik:RadScriptBlock>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px">
<telerik:RadTreeView ID="RadTreeView1" runat="server" Height="60px" Width="100px">
<Nodes>
<telerik:RadTreeNode Value="1" Text="1"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="2" Text="2"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="3" Text="3"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="4" Text="4"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="5" Text="5"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="6" Text="6"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="7" Text="7"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="8" Text="8"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="9" Text="9"></telerik:RadTreeNode>
<telerik:RadTreeNode Value="10" Text="10"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</telerik:RadAjaxPanel>
</div>
</form>
</body>
</html>
-------------------------------------
Imports Telerik.Web.UI
Public Class WebForm1
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim nodeSelected As RadTreeNode = RadTreeView1.FindNodeByValue(10)
nodeSelected.Selected = True
Dim js As String = "ScrollToSelectedNode();"
RadScriptManager.RegisterStartupScript(Page, Page.[GetType](), "nodeSelection", js, True)
End If
End Sub
End Class
Rank 1
It has been about 5 days. Is there any answer to my issue described in this thread?
Do you need anything else?
Here is how your ScrollToSelectedNode function should look like:
function ScrollToSelectedNode(){ var treeviewInstance = $find('<%= RadTreeView1.ClientID %>'); var selectedNode = treeviewInstance.get_selectedNode(); if (selectedNode != null) { window.setTimeout(function() { selectedNode.scrollIntoView(); }, 200); }}Regards,
Nikolay Tsenkov
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.