Javascript can't find my treeview

5 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Sep 2007

    Posted 16 Nov 2009 Link to this post

    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> 
     
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 16 Nov 2009 Link to this post

    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.
  5. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Sep 2007

    Posted 16 Nov 2009 Link to this post

    Is there a reason that the $find code seems to need to run from an onclick or similar, I just tried converting it to run using <body onload="getTree()"> and it again couldn't find the tree. Whilst running it from the button still works, is there a way round this?

    I have an iFrame with some javascript content and want to be able to change a node imageURL depending on a return value that the iFrame sends back to a javascript API, but the API can't find the TreeView when I want to do the update.
  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 16 Nov 2009 Link to this post

    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.
  9. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Sep 2007

    Posted 16 Nov 2009 Link to this post

    Thanks that really helped :)
Back to Top