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

TreeView .get_allNodes() Javascript

2 Answers 374 Views

TreeView

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

Craig asked on 25 Jul 2012, 04:00 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 Answers, 1 is accepted

Accepted

answered on 26 Jul 2012, 11:14 AM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

TreeView .get_allNodes() Javascript

2 Answers, 1 is accepted