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

RadTreeView .Select() on Client Side with Dynamic Treeviews

3 Answers 110 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jason Sweatt
Top achievements
Rank 1
Jason Sweatt asked on 06 Jul 2010, 02:20 PM
We are dynamically creating RadTreeview controls server side and adding the controls to a div control on the form.  So there is no html markup Telerik.RadTreeview controls on the form in the source of the aspx page.

We want to use the .Select() method for the RadTreeview client side.  We have tried to have the Server side code render the ClientID within a Page.ClientScript.RegisterStartupScript and tried using the $find('Name of Control') method but this is always null.  We cannot use the (var treeView = $find("<%=RadTreeView1.ClientID%>"); ) no mark up is available. 

We cannot find any method to use from the Sys.Application api that the RadTreeview is using.

Do you have a method for dynamically created RadTreeview controls on the client side so we can find the controls?  Every time we try and find the control it is just a dom Object and not a Telerik.Web.UI.RadTreeView object client side.

Help PLEASE!

View Source of the Page Code:
Telerik.Web.UI.RadTreeView._preInitialize("menu_ctl00","0");
Telerik.Web.UI.RadTreeView._preInitialize("menu_ctl01","0");

Sys.Application.initialize();

WebForm_InitCallback();
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadTreeView,
    {"_skin":"Default","_uniqueId":"menu$ctl00",
    "attributes":{},"clientStateFieldID":"menu_ctl00_ClientState","collapseAnimation":"{\"duration\":200}",
    "expandAnimation":"{\"duration\":200}",
    "nodeData":[{"value":"DEFAULT.ASPX","toolTip":"Home","attributes":{"url":"/CC/DEFAULT.ASPX?PAGENAVID=1001"}},
        {"items":[{"value":"HOME/BUILDSUMMARY.ASPX#OVERVIEW","toolTip":"Overview and Tutorial","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1127#OVERVIEW"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#ROOMS","toolTip":"Step 1: Rooms","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1128#ROOMS"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#POLICIES","toolTip":"Step 2: Policies","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1129#POLICIES"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#RATES","toolTip":"Step 3: Rates","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1130#RATES"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#BASICS","toolTip":"Step 4: Basic Hotel Info","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1131#BASICS"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#AREAINFO","toolTip":"Step 5: Area Info","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1132#AREAINFO"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#SERVICESAMENITIES","toolTip":"Step 6: Services and Amenities","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1133#SERVICESAMENITIES"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#MEETINGDINING","toolTip":"Step 7: Meeting and Dining","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1134#MEETINGDINING"}},
                  {"value":"HOME/BUILDSUMMARY.ASPX#ADDITIONALINFO","toolTip":"Step 8: Additional Info","attributes":{"url":"/CC/HOME/BUILDSUMMARY.ASPX?PAGENAVID=1135#ADDITIONALINFO"}}]}]},
        {"nodeClicking":ClientNodeClickedLocal}, null, $get("menu_ctl00"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadTreeView,
    {"_skin":"Default","_uniqueId":"menu$ctl01",
    "attributes":{},"clientStateFieldID":"menu_ctl01_ClientState","collapseAnimation":"{\"duration\":200}",
    "expandAnimation":"{\"duration\":200}",
    "nodeData":[{"items":[{"value":"ADMINISTRATION/ADMINCHAINSETUP.ASPX","toolTip":"Chain Maintenance","attributes":{"url":"/CC/ADMINISTRATION/ADMINCHAINSETUP.ASPX?PAGENAVID=1004"}},
                          {"value":"ADMINISTRATION/ADMINISTRATIONCHAIN.ASPX","toolTip":"Chain Administration","attributes":{"url":"/CC/ADMINISTRATION/ADMINISTRATIONCHAIN.ASPX?PAGENAVID=1124"}},
                          {"value":"CHAIN/CHAINAGENTSETUP.ASPX","toolTip":"Commissionable Accounts","attributes":{"url":"/CC/CHAIN/CHAINAGENTSETUP.ASPX?PAGENAVID=2242"}},
                          {"value":"CHAIN/LOYALTYPROGRAMS.ASPX","toolTip":"Loyalty Programs","attributes":{"url":"/CC/CHAIN/LOYALTYPROGRAMS.ASPX?PAGENAVID=1118"}},
                          {"value":"CHAIN/VIPSETUP.ASPX","toolTip":"VIP Levels","attributes":{"url":"/CC/CHAIN/VIPSETUP.ASPX?PAGENAVID=1160"}},
                          {"value":"CHAIN/SUBSOURCE.ASPX","toolTip":"Sub Source Codes","attributes":{"url":"/CC/CHAIN/SUBSOURCE.ASPX?PAGENAVID=1125"}},
                          {"value":"CHAIN/RATEFILTERSETUP.ASPX","toolTip":"Rate Filters","attributes":{"url":"/CC/CHAIN/RATEFILTERSETUP.ASPX?PAGENAVID=2289"}},
                          {"value":"CHAIN/BRANDSETUP.ASPX","toolTip":"Brands","attributes":{"url":"/CC/CHAIN/BRANDSETUP.ASPX?PAGENAVID=2301"}},
                          {"value":"CHAIN/DESTINATIONSETUP.ASPX","toolTip":"Destinations","attributes":{"url":"/CC/CHAIN/DESTINATIONSETUP.ASPX?PAGENAVID=2302"}},
                          {"value":"CHAIN/CROSETUP.ASPX","toolTip":"CROs","attributes":{"url":"/CC/CHAIN/CROSETUP.ASPX?PAGENAVID=2303"}},
                          {"value":"CHAIN/IATAGROUPSETUP.ASPX","toolTip":"Travel Agent Groups","attributes":{"url":"/CC/CHAIN/IATAGROUPSETUP.ASPX?PAGENAVID=2305"}}]},
                {"items":[{"value":"ADMINISTRATION/ADMINHOTELSETUP.ASPX","toolTip":"Hotel Maintenance","attributes":{"url":"/CC/ADMINISTRATION/ADMINHOTELSETUP.ASPX?PAGENAVID=1005"}},
                          {"value":"ADMINISTRATION/ADMINISTRATIONHOTEL.ASPX","toolTip":"Hotel Administration","attributes":{"url":"/CC/ADMINISTRATION/ADMINISTRATIONHOTEL.ASPX?PAGENAVID=1008"}},
                          {"value":"ADMINISTRATION/HOTELDEACTIVATION.ASPX","toolTip":"Hotel Deactivation","attributes":{"url":"/CC/ADMINISTRATION/HOTELDEACTIVATION.ASPX?PAGENAVID=2285"}},
                          {"value":"ADMINISTRATION/ARIRESTATUS.ASPX","toolTip":"ARI Restatus","attributes":{"url":"/CC/ADMINISTRATION/ARIRESTATUS.ASPX?PAGENAVID=1140"}},
                          {"value":"ADMINISTRATION/BOOKINGRETRIEVAL.ASPX","toolTip":"Booking Retrieval","attributes":{"url":"/CC/ADMINISTRATION/BOOKINGRETRIEVAL.ASPX?PAGENAVID=1161"}},
                          {"value":"ADMINISTRATION/IDEASEXPORT.ASPX","toolTip":"Ideas Export","attributes":{"url":"/CC/ADMINISTRATION/IDEASEXPORT.ASPX?PAGENAVID=2287"}}]},
                {"items":[{"value":"HOTEL/INTEGRATIONDETAIL.ASPX","toolTip":"Integration Detail","attributes":{"url":"/CC/HOTEL/INTEGRATIONDETAIL.ASPX?PAGENAVID=1104"}}]},
                {"items":[{"value":"ADMINISTRATION/HOTELUSERSETUP.ASPX","toolTip":"User Maintenance","attributes":{"url":"/CC/ADMINISTRATION/HOTELUSERSETUP.ASPX?PAGENAVID=1006"}},
                    {"value":"ADMINISTRATION/USERACCESSSETUP.ASPX","toolTip":"User Access","attributes":{"url":"/CC/ADMINISTRATION/USERACCESSSETUP.ASPX?PAGENAVID=1007"}}]}]},
                {"nodeClicking":ClientNodeClickedLocal}, null, $get("menu_ctl01"));
});

3 Answers, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 12 Jul 2010, 01:15 PM
Hello Jason Sweatt,

We don't encourage our users to perform actions such as creating a treeView control client-side at lower level and methods such as $create are not part of our Client-side API. The only reason that the client-side is able to use this method, is simply - the nature of java script (we are not able to declare it as internal, use it only privately and prevent you from using it because there isn't way to do so).
There is a reason, why we don't provide high-level way to create objects of type RadTreeView on the client.

I am sure that all that you need to do in order to achieve your scenario is to create the RadTreeView in the markup of your page, setting all the properties that you need to, but no content (no Nodes) and then you can use the Client-side API that we provide to add/remove/edit nodes.
Here is a link to the Client-side programming help for RadTreeView: http://www.telerik.com/help/aspnet-ajax/tree_clientprogramming.html
Please go through the help articles of this section and if you have any further questions contact with us again!

Hope this is helpful for you!


Regards,
Nikolay Tsenkov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jason Sweatt
Top achievements
Rank 1
answered on 12 Jul 2010, 01:26 PM
Maybe you did not understand the question in hand.  I just showed the code that your Server Side RadTreeview (RadTreeview radTrreview as new RadTreeview) control puts out.  We were not creating the Telerik RadTreeview dynamically client side.  We were creating the RadTreeview server side dynamically, and in doing so we could not use the $find() method by name because for some reason the telerik did not exist on the form in dom.  We tried everything we could think of.  The only work around was to create the Telerik RadTreeviews in the markeup and dynamically add the properties server side.  Then we were able to access the dom Microsoft AJAX  $find() with the markup name of the telerik RadTrreview control.

Without the Telerik Radtreeview control in the html markup, there is no way to find the control in dom as a Telerik.UI.RadTreeview object. 

Thanks for you reply.
0
Nikolay Tsenkov
Telerik team
answered on 15 Jul 2010, 10:14 AM
Hello Jason Sweatt,

Sorry, for the wrong conclusion. And there is way to find the TreeView with $find, after dynamically created on the server!

I have prepared a simple example for you:

1. Here is the markup of the page and the JavaScript finding the tree and alerting it's ID:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ 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">
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
    <asp:ScriptManager runat="server" />
 
    <script type="text/javascript">
         
        function onLoad(sender) {
            // the sender is the treeView, but for
            // proof of concept we will $find the treeView anyway
            var tree=$find(treeID);
            alert(tree.get_id());
        }
    </script>
 
    <div id="TreeViewContainer" runat="server">
     
    </div>
 
    </div>
    </form>
</body>
</html>

2. Here is the Code-Behind of the page:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
public partial class _Default : System.Web.UI.Page
{
    RadTreeView treeView;
 
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        treeView = new RadTreeView();
        treeView.OnClientLoad += "onLoad";
        treeView.Nodes.Add(new RadTreeNode("Root"));
        treeView.Nodes[0].Nodes.Add(new RadTreeNode("Child"));
 
        TreeViewContainer.Controls.Add(treeView);
 
        ScriptManager.RegisterStartupScript(this, this.GetType(), "treeViewLoadScript", "var treeID = '" + treeView.ClientID + "';", true);
    }
}

Hope this solves your problem!


Regards,
Nikolay Tsenkov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
TreeView
Asked by
Jason Sweatt
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
Jason Sweatt
Top achievements
Rank 1
Share this question
or