Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > Two link per node - how can I do this?

• Tonyz289

  Posted on Feb 6, 2012 (permalink)

  I have a tree that looks like this:
  
  Each entry is follow by the letter 'e'. Clicking on the text of the node displays the assets to which the nodes is pointing. Clicking on the 'e' bring up the definition of the node in a pop up window. Unfortunately when the user clicks on a 'e' in different node than is displayed the display changes to that node (a bad thing) and the pop-up is displayed. Is there any way of preventing the clicks of the 'e' from displaying the assets.
  
  Here is the definition of the tree
  

  <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" MultipleSelect="True"

      EnableViewState="true" ShowLineImages="False" EnableEmbeddedSkins="False" Skin="tree_2"

      OnNodeClick="RadTreeView1_NodeClick" OnNodeDataBound="RadTreeView1_NodeDataBound">

     <NodeTemplate>

          <small>

              <asp:Label ID="lblnodeText" Text='<%#Eval("Title") %>' runat="server" /><asp:Label

                  ID="lblCatId" Text='<%#Eval("Id") %>' runat="server" Visible="false"></asp:Label><asp:Label

                      ID="lblisCustomer" Text='<%#Eval("isCustomer") %>' runat="server" Visible="false"></asp:Label><asp:Label

                          ID="Description" runat="server" Text='<%#Eval("description") %>' Visible="false" /><asp:HiddenField

                              ID="DescriptionVisible" runat="server" Value='<%#Eval("descriptionVisible") %>' />

          </small>

          <small><a href="javascript:Popup_Window('category_detail','<%# Eval("id") %>')" style="text-decoration: none;">

              <span style="color: #BBBBBB">e</span></a></small></NodeTemplate>

  </telerik:RadTreeView>

  Reply

• Bozhidar Bozhidar

  Posted on Feb 7, 2012 (permalink)

  Hello Tony,
  
  You can try the following approach:
  
  Instead of using links, leave just the span and attach a click event to it. In the event, cancel the event bubbling, so that it doesn't reach the TreeNode. Here's a small example:
  
  

  <telerik:RadTreeView OnNodeClick="RadTreeView1_NodeClick" OnClientLoad="clientLoad" ID="RadTreeView1" runat="server">

      <Nodes>

          <telerik:RadTreeNode Text="Node Text" Value="value" />

          <telerik:RadTreeNode Text="Node Text" Value="value" />

          <telerik:RadTreeNode Text="Node Text" Value="value" />

      </Nodes>

      <NodeTemplate>

          <span><%# DataBinder.Eval(Container, "Text") %></span>

          <span class="linkButton" style="color: #BBBBBB"><%# DataBinder.Eval(Container, "Value") %></span>

      </NodeTemplate>

  </telerik:RadTreeView>

           

  <script type="text/javascript">

   

      function clientLoad(sender) {

          $telerik.$(".linkButton").on('click', function(e) {

                   
                   //Show popup                 
  
  

              if (!e) var e = window.event;

              e.cancelBubble = true;

              if (e.stopPropagation) e.stopPropagation();

          });

      }

   

  </script>

  
   
  All the best,
  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 > Two link per node - how can I do this?