TreeView .get_allNodes() Javascript

3 posts, 1 answers
  1. Craig
    Craig avatar
    6 posts
    Member since:
    Aug 2012

    Posted 25 Jul 2012 Link to this post

    Having some problems with the javascript to get all nodes using the sample code provided here:

    http://www.telerik.com/help/aspnet-ajax/treeview-client-objects-radtreenode.html

    Am getting the error

    Error: TypeError: tree is null
    Source File: http://localhost/Edit/CategorySelection.aspx
    Line: 48

    I thought jQuery might be causing some problems, it is in no conflict mode. have tried changing
    var tree = $find("<%= RadTreeView1.ClientID %>");
    to
    var tree = jQuery("<%= RadTreeView1.ClientID %>");
    but i get the error

    Error: TypeError: tree.get_nodes is not a function
    Source File: http://localhost/Edit/CategorySelection.aspx
    Line: 48

    Any idea whats causing this error? (code below, js to get nodes contained in nodetest and loaded on document load

    Master Page:

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main1.master.cs" Inherits="Main1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="~/css/style.css" />
        <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">jQuery.noConflict();</script>
        <asp:ContentPlaceHolder id="ContentHead" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <div id="wrapper">
            <form id="form1" runat="server">
                <asp:Literal ID="test1" runat="server"></asp:Literal>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
                <div class="headercon">
                    <asp:Panel id="header" CssClass="header" runat="server">
                        <asp:HyperLink ID="HyperLink1" NavigateUrl="~/?reset=global" runat="server">
                            <div class="logo">                       
                            </div>
                        </asp:HyperLink>
                        <div class="fascia"></div>
                        <div class="topmenu">
                            <ul>
                                <li class="on"><asp:HyperLink ID="HyperLink2" NavigateUrl="~/" runat="server">Dashboard</asp:HyperLink></li>
     
                                <li class="list">
                                    <asp:Label ID="LabelFascia" runat="server" AssociatedControlID="FasciaDropDown" Text="Fascia" />
                                    <telerik:RadComboBox ID="FasciaDropDown" runat="server" Width="140px" AutoPostBack="True" OnSelectedIndexChanged="Fascia_SelectedIndexChanged" />
                                </li>
     
                                <li><asp:HyperLink ID="HyperLink3" NavigateUrl="~/Edit/Default.aspx" runat="server">Style</asp:HyperLink></li>
                                <li><asp:HyperLink ID="HyperLink4" NavigateUrl="~/Reports/Default.aspx" runat="server">Reports</asp:HyperLink></li>
                                <li><asp:HyperLink ID="HyperLink5" NavigateUrl="~/Admin/Default.aspx" runat="server">Admin</asp:HyperLink></li>
                            </ul>
                        </div>
                    </asp:Panel>
                </div>
                <div class="content">
                    <asp:Panel id="breadcrumbs" runat="server"></asp:Panel>
                    <asp:ContentPlaceHolder id="ContentMain" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <div class="footer">
                </div>
            </form>
        </div>
    </body>
    </html>

    Page

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main1.master" AutoEventWireup="true" CodeFile="CategorySelection.aspx.cs" Inherits="CategoryEditor" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentHead" Runat="Server">
        <script type="text/javascript">
            //<!--
            function nodeDropping(sender, args) {
                // set target to the element on which the node is dropped
                var target = args.get_htmlElement();
                // check whether target is in the panel or tree view
                // by working up the parent chain to a known element
                try {
                    while (target) {
     
                        var targetID = target.id;
                        var className = target.className;
                        // we reached the tree view -- this is a good target                 
                        if (targetID == "<%# RadTreeView1.ClientID %>")
                            return;
                        // the "between nodes" lines are not actually in the tree view,
                        // but they have class names that begin "rtDrop"
                        else if (className.startsWith("rtDrop"))
                            return;
                        // we are inside the panel -- this is a good target
                        else if (targetID == "<%# Panel1.ClientID %>") {
                            args.set_htmlElement(target);
                            return;
                        }
                        target = target.parentNode;
                    }
                } catch (e) { }
                // we were not in a good target, cancel the drop
                args.set_cancel(true);
            }
     
            function nodeCheck(sender, args) {
                var target = args.get_selectedNodes();
     
            }
     
            function nodetest() {
                var tree = $find("<%= RadTreeView1.ClientID %>");
                var allNodes = tree.get_nodes().getNode(0).get_allNodes();
                for (var i = 0; i < allNodes.length; i++) {
                    var node = allNodes[i];
                    alert(node.get_text());
                }
     
            }
     
            jQuery(document).ready(function () {
                nodetest();
            });
     
            //-->
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" Runat="Server">
        <h1>Category Editor</h1>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <asp:Label ID="treeSearchLabel" runat="server">Refine</asp:Label>
        <asp:TextBox ID="treeSearch" runat="server"></asp:TextBox>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadTreeView ID="RadTreeView1" runat="server"
                EnableDragAndDrop="true"
                OnNodeDrop="TreeView_NodeDrop"
                OnClientNodeDropping="nodeDropping"
     
                TriStateCheckBoxes="true"
                CheckBoxes="true"
                CheckChildNodes="false"
                >
                <Nodes>
                </Nodes>
            </telerik:RadTreeView>
        </telerik:RadAjaxPanel>
     
        <asp:Panel ID="Panel1" runat="server" ForeColor="#7799FF" BorderColor="#7799FF"
            BorderStyle="Double" BorderWidth="4px" GroupingText="Details" >
            <asp:Label ID="Label1" runat="server" ></asp:Label>
            <asp:Label ID="WhatsChecked" runat="server" ></asp:Label>
        </asp:Panel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </asp:Content>

  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Jul 2012 Link to this post

    Hi Craig,

    One suggestion is you can bind your script in OnClientLoad event of Radtreeview and access it as follows.

    Javascript:
    function nodetest(sender, args)
    {    
     var allNodes = sender.get_nodes().getNode(0).get_allNodes();
     for (var i = 0; i < allNodes.length; i++)
     {
      var node = allNodes[i];
      alert(node.get_text());
     }
    }

    ASPX:
    <telerik:RadTreeView ID="RadTreeView1" OnClientLoad="nodetest" runat="server"
      EnableDragAndDrop="true"
      OnNodeDrop="TreeView_NodeDrop"
      OnClientNodeDropping="nodeDropping"
      TriStateCheckBoxes="true"
      CheckBoxes="true"
      CheckChildNodes="false" >
      <Nodes>
      </Nodes>
    </telerik:RadTreeView>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Craig
    Craig avatar
    6 posts
    Member since:
    Aug 2012

    Posted 30 Jul 2012 Link to this post

    Hi Princy,

    Thanks for your reply thats sorted my problem,

    many thanks
    Craig
Back to Top