How to find the selected node is Parent Node or Child Node in tree view

[sravanthi]

Hi,
I want to know the checked Node is parent node or  Child node.Can I do that.
Please let me know.
I am having a tree view which is loaded by the sql datasource like this,
<telerik:RadTreeView ID="tvwGroups" Height="320px" Width="300" runat="server" CheckBoxes="True" TabIndex="1"
                            DataSourceID="sdsTreeView" DataFieldID="CATGROUPID"  DataTextField="NAME" DataFieldParentID="PARENTID" OnNodeCheck="OnNodeCheck_tvwGroups">
                                <DataBindings>
                                    <telerik:RadTreeNodeBinding TextField="NAME" ValueField="CATGROUPID" />
                                    <telerik:RadTreeNodeBinding Depth="0"  ValueField="CATGROUPID" TextField="NAME"/>
                                </DataBindings>
                            </telerik:RadTreeView>
I want to do different things based on the parent node and child node.


Thanks,
Sravanthi.

[Princy]

Hello Sravanthi,

You can achieve this by attaching NodeCheck event as shown below.
C#:

protected void RadTreeView1_NodeCheck(object sender, RadTreeNodeEventArgs e)
{
     RadTreeNode node = e.Node;
      if (node.Checked)
    {
       string value = RadTreeView1.FindNodeByText("Node1").Text;
    }
}

Thanks,
Princy.

[Silvia]

Hi
In java script can i do it?

[Shinu]

Hello Silvia,

You can try the following javascript.

JS:

<script type="text/javascript">
function OnClientNodeClicked(sender, args)
 {
   var node= sender.get_selectedNode();
   if (node._hasChildren()==true)
  {
      alert("has child");
  }
}
</script>

 
Thanks,
Shinu.

[Kate]

Hi Silvia,

You can find more information on the different client-side events that you can use with the RadTreeView control in the following help article - Client-Side Events

Best wishes,
Kate
the Telerik team

[Pawan]

Hi,
I am also trying to find out if the node is parent or not and then change its CssClass. I am trying it in NodeBound method. I don't see "Node" property in the list. Is there any other way to find out if the node is parent or not?

[Princy]

Hello,

Try the following.
JS:

function OnClientLoad(sender, args)
 {
 var nodes = sender.get_allNodes();
  for (var i = 0; i < nodes.length; i++)
  {
    if (nodes[i].get_level() == 0)
    {
     if (nodes[i]._hasChildren() == true)
     {
      nodes[i].set_cssClass("parentcss");
     }
    }

   }
 }

CSS:

.parentcss
  {
    background:Red !important;
  }

Thanks,
Princy.

[Pawan]

thanks princy for replying but I need more help. Can you give me the content of CSS to replace the +/- image to expand with custom image? I am trying with the following but it does not work.

.RadTreeView_Test

 

.rtPlus {

 

 

background-image: url("../Images/OMSNav_FolderNode.gif");

 

}

[Shinu]

Hello Pawan,

Try the following CSS.
CSS:

<style type="text/css">

 .RadTreeView .rtPlus

{

background-image: url("Images/Node.gif") !important;
}

</style>

-Shinu.

[Pawan]

Isn't it similar to mine? I have tried it already. Does not work. :(

[Shinu]

Hello Pawan,

Make sure that you use !important to override the default style.
CSS:

div.RadTreeView_Default .rtPlus, div.RadTreeView_Default .rtMinus
{
  background-image: url("Images/Node.gif") !important ;
}

-Shinu.

[Pawan]

Please let me know where am i going wrong. Below is my code.

ascx
     div.RadTreeView_Default .rtPlus, div.RadTreeView_Default .rtMinus
{
  background-image: url("../../../../Images/OMSNav_FolderCol.gif") !important ;
}

<rad:RadTreeView ID="RadTreeBU"  runat="server" OnNodeBound="RadTreeBU_NodeBound"    >
                        </rad:RadTreeView>

.CS

protected void RadTreeBU_NodeBound(object sender, RadTreeNodeEventArgs e)
        {

            e.NodeBound.CssClass = "RadTreeView_Default";
           // e.NodeBound.ImageExpandedUrl = "../Images/OMSNav_FolderExp.gif";
           //e.NodeBound.ImageUrl = "../Images/OMSNav_FolderCol.gif";

        }

I have also tried to add CssClass property in ascx file itself but in vain.

[Bozhidar]

Hello Pawan,

RadTreeView_Default is a class that's automatically added to the whole TreeView when it it created on the client. You don't have to add it yourself. If you use a skin, for instance "Web20", the name of this class is going to be RadTreeView_Web20.

Remove the databound event from your tree and it should work as expected. Or you can try this example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Functionality_TreeView_Default" %>
<%@ Register tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>

<!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 id="Head1" runat="server">
    <title></title>
    <style type="text/css">

        div.RadTreeView_Default .rtPlus, div.RadTreeView_Default .rtMinus
        {
            background-image: url("Image.jpg") !important ;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <div>

        <telerik:RadTreeView ID="RadTreeView1" runat="server">
            <Nodes>
                <telerik:RadTreeNode Text="Root">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child">
                            <Nodes>
                                <telerik:RadTreeNode Text="GrandChild" />
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>

    </div>
    </form>
</body>
</html>

 
Greetings,
Bozhidar
the Telerik team

[Sunil]

if (Tree_Chapter_List.SelectedNode.Level ==0  ) { RadMessageBox.Show("Please Select a chlid chapter", "Message"); return; }

[Virat]

Hello madam please tell me theoraticaly on what basis the parent and child node is selected please tell me

my mail id is "[e-mail]"

[anushuia]

Hai i had little exp in javascript can help me to understood thid code,

inside the fuction you passed ( sender, args ) i dont,t what is the use of those and what it will do :)

or tell me whether i need to inject these in my controller.js

and i dont konw about this get_selectedNode() fuction also, can you help me?

<script type="text/javascript">
function OnClientNodeClicked(sender, args)
 {
   var node= sender.get_selectedNode();
   if (node._hasChildren()==true)
  {
      alert("has child");
  }
}
</script>

[Peter Milchev]

Hello Anushuia,

The OnClientNodeClicked function is the event handler function for the OnClientNodeClicked of the RadTreeView. When the OnClientNodeClicked event is fired by the TreeView, the TreeView passes itself as the first argument and as a second parameter passes an argument with the get_node() and get_domEvent() methods. 

The .get_selectedNode() method is a method from the API of the client-side object of the TreeView. You can find more on the client-side API of the TreeView here: 

• RadTreeView client-side object API;
• RadTreeNode client-side object API; 
• RadTreeNodeCollection client-side object API;

Also, I think that reviewing the First Steps with UI for ASP.NET AJAX article and the whole Getting Started section would be helpful to better understanding how our controls work, for example, client-side event handling.

Regards,
Peter Milchev
Progress Telerik