This is a migrated thread and some comments may be shown as answers.

[Solved] Javascript can't find my treeview

4 Answers 166 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Jonathan asked on 16 Nov 2009, 01:34 PM

Probably a really obvious mistake, but I have been scratching my head for a couple of hours now. I can't seem to get javascript to find my tree view, I started off in a splitter area, and then took it out, and have now created the most basic page I can to try and find a tree view with the Javascript API.

When I run this I get a Javascript error telling me

"Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Timestamp: Mon, 16 Nov 2009 13:32:20 UTC

Message: 'tree' is null or not an object
Line: 67
Char: 18
Code: 0"

So it's not finding the tree, never mind the nodes. Any suggestions would be gratefully received.

Jon

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="LMS_LMS_Default4" %> 
        
            <%@ 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>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
            <asp:ScriptManager ID="ScriptManager1" runat="server">    
        
            </asp:ScriptManager>    
        
                <div> 
        
                <telerik:RadTreeView ID="LessonTree" runat="server">    
        
                <CollapseAnimation Duration="100" Type="OutQuint" />    
        
                <ExpandAnimation Duration="100" />    
        
                <Nodes>    
        
                    <telerik:RadTreeNode Text="Item1"> </telerik:RadTreeNode>    
        
                    <telerik:RadTreeNode Text="Item2"> </telerik:RadTreeNode>    
        
                    <telerik:RadTreeNode Text="Item3"> </telerik:RadTreeNode>    
        
                </Nodes>    
        
            </telerik:RadTreeView>    
        
            <script type="text/javascript">    
        
               var tree = $find("<%= LessonTree.ClientID %>");  
        
               for (var i=0; i<tree.get_nodes().get_count();i++)     
        
               {           
        
                   var node = tree.get_nodes().getNode(i);           
        
                   alert(node.get_text());     
        
               }  
        
            </script>    
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

4 Answers, 1 is accepted

answered on 16 Nov 2009, 01:47 PM

Hello Jonathan,

Here's your modified code snippet that works just fine. Let us know if you have other questions and/or problems.

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadTreeView ID="LessonTree" runat="server">

<CollapseAnimation Duration="100" Type="OutQuint" />

<ExpandAnimation Duration="100" />

<Nodes>

<telerik:RadTreeNode Text="Item1">

</telerik:RadTreeNode>

<telerik:RadTreeNode Text="Item2">

</telerik:RadTreeNode>

<telerik:RadTreeNode Text="Item3">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

<script type="text/javascript">

function getTree() {

var tree = $find('<%= LessonTree.ClientID %>');

for (var i = 0; i < tree.get_nodes().get_count(); i++) {

var node = tree.get_nodes().getNode(i);

alert(node.get_text());

}

</script>

<input id="Button1" type="button" value="button" onclick="getTree()" />

</div>

</form>

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 16 Nov 2009, 02:30 PM

Hi Jonathan,

Here's a nice article on the matter. In addition, here's your modified code that shows the needed approach.

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadTreeView ID="LessonTree" runat="server">

<CollapseAnimation Duration="100" Type="OutQuint" />

<ExpandAnimation Duration="100" />

<Nodes>

<telerik:RadTreeNode Text="Item1">

</telerik:RadTreeNode>

<telerik:RadTreeNode Text="Item2">

</telerik:RadTreeNode>

<telerik:RadTreeNode Text="Item3">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

<script type="text/javascript">

function pageLoad() {

var tree = $find('<%= LessonTree.ClientID %>');

for (var i = 0; i < tree.get_nodes().get_count(); i++) {

var node = tree.get_nodes().getNode(i);

alert(node.get_text());

}

</script>

</div>

</form>

pageLoad() is a shortcut for the Sys.Application.load event. For details on the matter please refer to the following ASP.NET article.

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.