|
| 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