Adding nodes client side

[Balaji]

Hi

I am trying to add nodes to rad tree view from java script method.

To get tree view object reference, I tried in three ways as below

case1: var

treeViewInstance = <%=RadTreeView1.ClientID %>;

case2: var

treeViewInstance = window["<%= RadTreeView1.ClientID %>"];

case3: var treeViewInstance =$find("<%= RadTreeView1.ClientID %>");

In case1, case2 object is loading into treeViewInstance, But it does not having the methodes like get_nodes, trackChanges, commitChanges.

Where as in case3 treeViewInstance becoming null.

Can any one suggest me to solve this problem!!!

Thanks in advance,
Balaji Velasiri
 

[Atanas Korchev]

Hi Balaji,

It seems you are using RadTreeView classic (RadTreeView.Net2.dll) because the first two ways of getting the client-side object succeed. Unfortunately RadTreeView classic does not support client-side adding of nodes. You need to upgrade to RadTreeView for ASP.NET Ajax (Telerik.Web.UI.dll) in order to use the client-side rendering capabilities.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Balaji]

Hi Albert,

I am using Telerik.Web.UI.dll only.

I tried to create on RadTreeNode as below:
var node = new Telerik.Web.UI.RadTreeNode();

And I noticed that, this node having methods like get_nodes(),   get_enabled(), etc..

Thanks,
Balaji Velasiri.

[Atanas Korchev]

Hello Balaji,

Have you checked our online example? What is different in your case?

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Balaji]

Hi Albert,

I checked your link, in which your are adding nodes to existing node. Where as in my case I have to create whole tree on client side including root nodes.

In my aspx page, I only have rad tree view without any nodes in it.

Thanks,
Balaji Velasiri.

[Atanas Korchev]

Hello Balaji,

You can try this:

        <telerik:RadTreeView ID="RadTreeView1" runat="server">
        </telerik:RadTreeView>
        <script type="text/javascript">
            function pageLoad()
            {
                var treeView = $find("<%= RadTreeView1.ClientID %>");
                var node1 = new Telerik.Web.UI.RadTreeNode();
                node1.set_text("Added on the client-side 1");
                treeView.get_nodes().add(node1);
               
                var node2 = new Telerik.Web.UI.RadTreeNode();
                node2.set_text("Added on the client-side 2");
                treeView.get_nodes().add(node2);
            }
        </script>

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Balaji]

Hi Albert,

Thanks for giving code snippet, My problem is solved with your code.

But I want to know one thing. i.e If I use same code in my java script function, It is not getting tree view reference.

In my case I am using client side function as below:

<script type="text/javascript" language="javascript">

function AddNode()
{
 //your code
    }
AddNode();

</script>

What is the wrong as doing above.

Thanks,
Balaji Velasiri.

[Atanas Korchev]

Hello Balaji,

What's wrong is that RadTreeView is still not initialized when the AddNode function is called. ASP.NET Ajax client-side controls are instantiated when the page is loaded (you can check the $create JavaScript calls rendered at the end of the page). For that reason you can use the pageLoad function which fires immediately after the page is loaded.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mr]

 <script type="text/javascript">
            //<![CDATA[
                var treeView;
                var textBox;
                
                function pageLoad()
                {
                    treeView = document.getElementById("<%= radTRequirement.ClientID %>");
                    textBox = $find("<%= radTRequirement.ClientID %>");
                }
                
                function addNode()
                {
                    var nodeText = "New Node";
                    if (!nodeText)
                    {
                        alert("Please specify the text for the new node.");
                        return false;
                    }
                    
                    treeView.trackChanges();
                    
                    //Instantiate a new client node
                    var node = new Telerik.Web.UI.RadTreeNode();
                    alert(node);




                    //Set its text
                    node.set_text(nodeText);
                    alert(node.get_text());


----------------------------
but alert not run. and result is nothing
why?. please help me