Skip to content

Commit b9d3575

Browse files
github-actions[bot]KB Bot
andauthored
Added new kb article add-link-right-radtreeview-aspnet-ajax (#709)
Co-authored-by: KB Bot <[email protected]>
1 parent 37276f6 commit b9d3575

File tree

1 file changed

+103
-0
lines changed

1 file changed

+103
-0
lines changed
Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Adding Link to the Right of RadTreeNode in RadTreeView
3+
description: Learn how to add a text link to the right of specific RadTreeNode elements in a RadTreeView when loading data from an XML file.
4+
type: how-to
5+
page_title: How to Add Link to the Right of RadTreeNode in RadTreeView
6+
meta_title: How to Add Link to the Right of RadTreeNode in RadTreeView
7+
slug: add-link-right-radtreeview-aspnet-ajax
8+
tags: treeview, hyperlink, ui for asp.net ajax, nodedatabound, xml, node
9+
res_type: kb
10+
ticketid: 1695329
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td> Product </td>
19+
<td>
20+
TreeView for UI for ASP.NET AJAX
21+
</td>
22+
</tr>
23+
<tr>
24+
<td> Version </td>
25+
<td> All</td>
26+
</tr>
27+
</tbody>
28+
</table>
29+
30+
## Description
31+
32+
I want to add a text link to the right of specific RadTreeNode elements in my [RadTreeView](https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/overview) while loading data from an XML file. I need a solution that allows me to include the link URL and text as part of the XML structure and manipulate the nodes to display the links dynamically.
33+
34+
This knowledge base article also answers the following questions:
35+
- How to add a hyperlink next to RadTreeNode elements in RadTreeView?
36+
- How to customize RadTreeNode with a link using XML data?
37+
- How to use NodeDataBound for adding links dynamically?
38+
39+
## Solution
40+
41+
To achieve this, extend the XML structure to include the link properties (e.g., URL) using the `NavigateUrlField` property. Use a `NodeTemplate` to render the link alongside the RadTreeNode text.
42+
43+
### XML Structure Example
44+
45+
Update your XML file to include the URL for each node where you want the link to appear:
46+
47+
````XML
48+
<Tree>
49+
<Node Text="Desktop" Expanded="True" ToolTip="Desktop" Url="Default2.aspx">
50+
<Node Text="Administrator" Url="Default3.aspx" Expanded="True">
51+
<Node Text="AppData" Url="Default4.aspx">
52+
<Node Text="Microsoft" Url="Default5.aspx"/>
53+
</Node>
54+
<Node Text="Contacts" />
55+
<Node Text="Downloads" Url="Default6.aspx"/>
56+
</Node>
57+
</Node>
58+
</Tree>
59+
````
60+
61+
Use the following configuration for your RadTreeView control:
62+
63+
````ASP.NET
64+
<telerik:RadTreeView ID="RadTreeView2" runat="server" DataSourceID="XmlDataSource1" OnNodeDataBound="RadTreeView1_NodeDataBound">
65+
<NodeTemplate>
66+
<%# DataBinder.Eval(Container, "Text") %>
67+
<asp:HyperLink ID="SectionLink" runat="server" Visible="false"></asp:HyperLink>
68+
</NodeTemplate>
69+
<DataBindings>
70+
<telerik:RadTreeNodeBinding DataMember="Node" TextField="Text" NavigateUrlField="Url" ExpandedField="Expanded"></telerik:RadTreeNodeBinding>
71+
</DataBindings>
72+
</telerik:RadTreeView>
73+
74+
<asp:XmlDataSource runat="server" ID="XmlDataSource1" DataFile="TreeView.xml" XPath="/Tree/Node"></asp:XmlDataSource>
75+
````
76+
77+
Use the `NodeDataBound` event to dynamically set the properties of the link:
78+
79+
````C#
80+
protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
81+
{
82+
string url = e.Node.NavigateUrl;
83+
84+
if (!string.IsNullOrEmpty(url))
85+
{
86+
HyperLink link = (HyperLink)e.Node.FindControl("SectionLink");
87+
88+
if (link != null)
89+
{
90+
link.Text = url;
91+
link.NavigateUrl = url;
92+
link.Visible = true;
93+
link.Style.Add("margin-left", "10px");
94+
}
95+
}
96+
}
97+
````
98+
99+
This approach allows you to control which nodes display a link dynamically based on the XML data while keeping the structure data-driven.
100+
101+
## See Also
102+
103+
- [NodeDataBound Event](https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/server-side-programming/events/nodedatabound#nodedatabound)

0 commit comments

Comments
 (0)