How to Add Hyperlinks in TreeView .NET Control
Created: Apr 30, 2011
Updated: Jun 02, 2013
By default all nodes in TreeView .NET control shows plain text. But how to display one or more hyperlinks in each node? With IntegralUI TreeView this can be done very easily. For this purpose the standard anchor HTML tag is used.
IntegralUI TreeView has special feature to use standard HTML tags to arrange custom objects in custom layouts for each node separately. To add a hyperlink to a tree node, standard anchor <a> tag is used. The space allocated for the node acts like a container block where using various HTML tags many different objects can be placed.
At first let's start defining the node space as a container block using <div> tag. In this block for this example we will add a single anchor tag, but it is ok if you want to add more hyperlinks in the same block. For example:
node.Content = "<div><a href=\"\">Hyperlink</a></div>";
node.Content = "<div><a href="""">Hyperlink</a></div>"
Hint You may notice that we are using the Content property. This property is specially designed to accept a HTML formatted text which internally is decoded and the result is displayed in node space when TreeView is updated.
The hyperlink above as it is right now, is not yet useful. It will display only the title "Hyperlink" in node. TO make it more useful we need to set the target URL path or local path of some application like NotePad.exe., SO whenever the hyperlink is clicked, this target info will used to process custom operation. For example let's set the target URL to point to www.lidorsystems.com:
node.Content = "<div><a href=\"www.lidorsystems.com\">Hyperlink</a></div>";
node.Content = "<div><a href=""www.lidorsystems.com"">Hyperlink</a></div>"
You may notice that the text color when mouse hovers over hyperlink is the same as the color when hyperlynk is not hovered. To have a different color when hyperlink is hovered, we can set this easily using inline style:
node.Content = "<div style=\"hovertextcolor:Blue\"><a href=\"www.lidorsystems.com\">Hyperlink</a></div>";
node.Content = "<div style=""hovertextcolor:Blue""><a href=""www.lidorsystems.com"">Hyperlink</a></div>"
As a result whenever this hyperlink is hovered, its text color will change to Blue color.
Finally, we need to handle click event for this hyperlink in order to start custom operation, in this case browser will open URL contained in the hyperlink href attribute.
private void treeView1_ItemObjectClicked(object sender, LidorSystems.IntegralUI.ObjectClickEventArgs e)
{
if (e.Object is LinkLabel)
{
LinkLabel lLabel = (LinkLabel)e.Object;
String linkData = lLabel.Links[0].LinkData.ToString();
System.Diagnostics.Process.Start(linkData);
}
}
Private Sub treeView1_ItemObjectClicked(ByVal sender As Object, ByVal e As LidorSystems.IntegralUI.ObjectClickEventArgs)
If TypeOf e.[Object] Is LinkLabel Then
Dim lLabel As LinkLabel = DirectCast(e.[Object], LinkLabel)
Dim linkData As [String] = lLabel.Links(0).LinkData.ToString()
System.Diagnostics.Process.Start(linkData)
End If
End Sub
There are two events, ItemObjectClicking and ItemObjectClciked which are fired whenever an object created using HTML tags is clicked within node space. The first event has a Cancel property which allows you to cancel the click on some object if some conditions are met, set from you in code. In this example we are handling only ItemObjectClicked event.
As you can see, the object which is created using <a> tag is actually LinkLabel object which carries information about the hyperlink. By extracting the data from this LinkLabel we can start some action, in this case asking browser to open the contained URL path.
A complete sample project in C# and VB showing how to create a tree view where each node contains hyperlink is available for download from here: TreeView .NET Hyperlinks