Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > How to find the selected node is Parent Node or Child Node in tree view

• sravanthi

  Posted on Aug 26, 2011 (permalink)

  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.

  Reply

• Princy MVP

  Posted on Aug 29, 2011 (permalink)

  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.

  Reply


• Silvia

  Posted on Oct 19, 2011 (permalink)

  Hi
  In java script can i do it?

  Reply

• Shinu MVP

  Posted on Oct 20, 2011 (permalink)

  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.

  Reply

• Kate Kate

  Posted on Oct 20, 2011 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

• Pawan

  Posted on Feb 2, 2012 (permalink)

  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?

  Reply

• Princy MVP

  Posted on Feb 2, 2012 (permalink)

  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.

  Reply

• Pawan

  Posted on Feb 3, 2012 (permalink)

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

   

  }

  Reply

• Shinu MVP

  Posted on Feb 3, 2012 (permalink)

  Hello Pawan,
  
  Try the following CSS.
  CSS:
  

  <style type="text/css">

   .RadTreeView .rtPlus

  {

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

  </style>

  
  -Shinu.

  Reply

• Pawan

  Posted on Feb 3, 2012 (permalink)

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

  Reply

• Shinu MVP

  Posted on Feb 3, 2012 (permalink)

  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.

  Reply

• Pawan

  Posted on Feb 3, 2012 (permalink)

  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.

  Reply

• Bozhidar Bozhidar

  Posted on Feb 6, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > How to find the selected node is Parent Node or Child Node in tree view