LIDOR SYSTEMS

Advanced User Interface Controls and Components

Click on Hyperlink to Expand Nodes in TreeView .NET

Created: 12 August 2013

Usually a node can be expanded or collapsed using the expand button. In some cases we may need to expand the node by clicking on node’s text or for example by using a custom made hyperlink. In this article we will present how to expand node by clicking on hyperlink in different scenarios.

IntegralUI TreeView comes with unique feature which enables you to create multiple hyperlinks in each node. By using HTML anchor tag and different block tags we can place multiple hyperlinks in different locations within the same node.

TreeView Expand Node from Hyperlink
Download Expand TreeNode from Hyperlink Sample

In picture below a TreeView three scenarios are presented:

  1. A whole node act as a hyperlink
  2. Multiple hyperlinks are shown within node’s text
  3. A hyperlink is aligned to the right side inside node space

By clicking on hyperlinks you can expand or collapse each node separately. The difference is in second scenario where we use one hyperlink to expand the node and the other to collapse it. You can create your own operation on when or how clicks from hyperlinks are processed. Whenever a hyperlink is clicked, the ItemObjectClicking and ItemObjectClicked events are fired. By handling these events, you can modify the process by adding your own code. In our example the code is:

private void treeView1_ItemObjectClicked(object sender, LidorSystems.IntegralUI.ObjectClickEventArgs e)

{

// Hyperlinks in node are converted to standard LinkLabel control

// Check whether the object within the event is of type LinkLabel

if (e.Object is LinkLabel)

{

LinkLabel lLabel = (LinkLabel)e.Object;

String action = lLabel.Links[0].LinkData.ToString();

 

// Determine which node's hyperlink is clicked using the KEY carried with the event

// If a node is found, expand or collapse it

LidorSystems.IntegralUI.Lists.TreeNode node = this.treeView1.FindNode(e.Key, LidorSystems.IntegralUI.Lists.ListSearchCriteria.byKey);

if (node != null)

{

switch (action)

{

case "Expand":

node.Expand();

break;

 

case "Collapse":

node.Collapse();

break;

 

default:

node.Toggle();

break;

}

}

}

}

Private Sub treeView1_ItemObjectClicked(ByVal sender As Object, ByVal e As LidorSystems.IntegralUI.ObjectClickEventArgs) Handles treeView1.ItemObjectClicked

' Hyperlinks in node are converted to standard LinkLabel control

' Check whether the object within the event is of type LinkLabel

If TypeOf e.[Object] Is LinkLabel Then

Dim lLabel As LinkLabel = DirectCast(e.[Object], LinkLabel)

Dim action As [String] = lLabel.Links(0).LinkData.ToString()

 

' Determine which node's hyperlink is clicked using the KEY carried with the event

' If a node is found, expand or collapse it

Dim node As LidorSystems.IntegralUI.Lists.TreeNode = Me.treeView1.FindNode(e.Key, LidorSystems.IntegralUI.Lists.ListSearchCriteria.byKey)

If node IsNot Nothing Then

Select Case action

Case "Expand"

node.Expand()

Exit Select

 

Case "Collapse"

node.Collapse()

Exit Select

Case Else

 

node.Toggle()

Exit Select

End Select

End If

End If

End Sub

At first we are checking whether the object carried with the event is of type LinkLabel. This is because hyperlinks from node are converted to LinkLabel object, which carries the information from various attributes in html anchor tag. Previously we have created in a tree hierarchy where we are using a special key, which is actually an identifier from id attribute inside <a> tag. This key is used to easily locate to which node this hyperlink belongs to. Also we are using the href attribute to store the type of action to be performed. In our example we have set three different actions: either to only expand, only collapse or expand and collapse the node.

There are various HTML tags supported to create a node with rich content, and we using the Content property to store the HTML generated code. The built-in html parser will take the information from this property and create necessary content objects and arrange then in different layouts.

A sample project in C# and VB is available for download from here: TreeView Expand Node from Hyperlink

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.