Add link to the right of radtreeNode

[Jerry]

Hello,

I'm loading a RadTreeView from an xml file.  This has been working fine for a long time.

I've been tasked with adding a text link to another page to the right of specific nodes.

Since I'm using LoadContentFile of my RadTreeView, I'm not sure if there is a way to manipulate the nodes to add a link when loading data.

In my example below I need to find a way to add the Section links to the right of my nodes.  Can I add the section text and url as properties of a node in my xml?

Example layout

-Top

-2000s

-2021 Section 1

-2022  Section 1

-2023 Section 2

Thank you

[Vasko]

Hello Jerry,

You can achieve this by extending the XML structure to include the link you wish to go to as the NavigateUrlField property when binding the fields. With it, you can include a HyperLink inside a  NodeTemplate to render the the link:

<Tree>
	<Node Text="Desktop" Expanded="True" ToolTip="Desktop" Url="Default2.aspx">
		<Node Text="Administrator" Url="Default3.aspx" Expanded="True">
			<Node Text="AppData" Url="Default4.aspx">
				<Node Text="Microsoft"  Url="Default5.aspx"/>
			</Node>
			<Node Text="Contacts" />
			<Node Text="Downloads"  Url="Default6.aspx"/>
		</Node>
	</Node>
</Tree>

<telerik:RadTreeView ID="RadTreeView2" runat="server" DataSourceID="XmlDataSource1" OnNodeDataBound="RadTreeView1_NodeDataBound">
    <NodeTemplate>
        <%# DataBinder.Eval(Container, "Text") %>
        <asp:HyperLink ID="SectionLink" runat="server" Visible="false"></asp:HyperLink>
    </NodeTemplate>
    <DataBindings>
        <telerik:RadTreeNodeBinding DataMember="Node" TextField="Text" NavigateUrlField="Url" ExpandedField="Expanded"></telerik:RadTreeNodeBinding>
    </DataBindings>
</telerik:RadTreeView>

<asp:XmlDataSource runat="server" ID="XmlDataSource1" DataFile="TreeView.xml" XPath="/Tree/Node"></asp:XmlDataSource>

After that, use the NodeDataBound event to set the properties of the link:

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
{
    string url = e.Node.NavigateUrl;

    if (!string.IsNullOrEmpty(url))
    {
        HyperLink link = (HyperLink)e.Node.FindControl("SectionLink");

        if (link != null)
        {
            link.Text = url;
            link.NavigateUrl = url;
            link.Visible = true;
            link.Style.Add("margin-left", "10px");
        }
    }
}

This method keeps your XML data-driven and allows you to control which nodes have a link on the right, without affecting your existing structure.

Regards,
Vasko
Progress Telerik

[Jerry]

Hi Vasko,

This was very helpful.  I have it working with this example, but now my supervisor wants me to make the node a link to a document and then the url to the right of the node a link to another page on a different tab.

Can I use the navigateURL for the main node and then create a link for the page url on the right?

 

for example can I add URL2 to the definition:

<Node Text="Desktop" Expanded="True" ToolTip="Desktop" Url="document1.pdf" Url2="default2.aspx">

So click "Desktop" would take the user to document1.pdf and clicking "Default2.aspx" would open another browser tab with "Default2.asp" page.

Thank you

[Vasko]

Hello,

Unfortunately, the NavigateUrlField can be used on one field for each node of the XML file, however, one possibility is to have the document link and page link in the same Url field, seperated by a semicolor (or any other separator). Once the Node data is read from the server, split the 2 urls and assign them to each link:

<telerik:RadTreeView ID="RadTreeView2" runat="server" DataSourceID="XmlDataSource1" OnNodeDataBound="RadTreeView1_NodeDataBound">
    <NodeTemplate>
        <asp:HyperLink ID="DocumentLink" runat="server" Visible="false"></asp:HyperLink>
        <asp:HyperLink ID="PageLink" runat="server" Visible="false"></asp:HyperLink>
    </NodeTemplate>
    <DataBindings>
        <telerik:RadTreeNodeBinding DataMember="Node" TextField="Text" NavigateUrlField="Url" ExpandedField="Expanded"></telerik:RadTreeNodeBinding>
    </DataBindings>
</telerik:RadTreeView>

<asp:XmlDataSource runat="server" ID="XmlDataSource1" DataFile="TreeView.xml" XPath="/Tree/Node"></asp:XmlDataSource>

<Tree>
	<Node Text="Desktop" Expanded="True" ToolTip="Desktop" Url="document1.pdf;Default2.aspx">
		<Node Text="Administrator" Url="document2.pdf;Default3.aspx" Expanded="True">
			<Node Text="AppData" Url="document3.pdf;Default4.aspx">
				<Node Text="Microsoft" Url="document4.pdf;Default5.aspx"/>
			</Node>
			<Node Text="Contacts" Url="document2.pdf;contacts.aspx" />
			<Node Text="Downloads" Url="document3.pdf;Default6.aspx"/>
		</Node>
	</Node>
</Tree>

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
{
    string[] urls = e.Node.NavigateUrl.Split(';');
    string documentUrl = urls.Length > 1 ? urls[0] : string.Empty;
    string pageUrl = urls.Length > 1 ? urls[1] : string.Empty;

    if (!string.IsNullOrEmpty(documentUrl) && !string.IsNullOrEmpty(pageUrl))
    {
        HyperLink documentLink = (HyperLink)e.Node.FindControl("DocumentLink");
        HyperLink pageLink = (HyperLink)e.Node.FindControl("PageLink");

        if (pageLink != null && documentLink != null)
        {
            SetHyperLink(documentLink, documentUrl);
            SetHyperLink(pageLink, pageUrl, "10px");
        }
    }
}

private void SetHyperLink(HyperLink link, string url, string marginLeft = null)
{
    if (link == null || string.IsNullOrEmpty(url)) return;

    link.Text = url;
    link.NavigateUrl = url;
    link.Target = "_blank";
    link.Visible = true;

    if (!string.IsNullOrEmpty(marginLeft))
    {
        link.Style.Add("margin-left", marginLeft);
    }
}

Regards,
Vasko
Progress Telerik

[Jerry]

Hi Vasko,

This worked exactly how I needed it too.  Thank you so much for all of your help.

Jerry