How to Create a HyperLink Column Within a TreeView Control

Let’s say you have an employee table and you want to be able to create a hyperlink on the employee name column with a custom url in the form of: “employee.aspx?ID=”

Within an asp.net datagrid, you could achieve this by creating a hyperlinkcolumn and specifying the DataNavigateUrlField and the DataNavigateUrlFormatString as follows:

1
<asp:HyperLinkColumn DataNavigateUrlField="EmployeeID" DataNavigateUrlFormatString="employee.aspx?ID={0}" DataTextField="Name"></asp:HyperLinkColumn>

If you’re using a Telerik TreeView control, however, the syntax is slightly different. While you can specify DataBindings within a Telerik TreeView control, there doesn’t seem to be a NavigateUrlFormatString property available. You can set the NavigateUrl and the NavigateUrlField property, but that’s not enough to get the same results as above.

The best way to accomplish this is:

Within the RadTreeView control, add an OnNodeBound event as follows. This will enable us to set our NavigateUrl at the same time our nodes are being bound to the treeview thus giving us more control:

1
<radT:RadTreeView ID="rtvEmployees" Skin="Default" runat="server" OnNodeBound="Node_Bound"></radT:RadTreeView>

Within your code behind file, create a function as follows:

1
2
3
4
protected void Node_Bound(object sender, Telerik.WebControls.RadTreeNodeEventArgs e)
{
    e.NodeBound.NavigateUrl = "employee.aspx?ID=" + e.NodeBound.Value;
}

Don’t forget that whether you build the structure programmatically or inline, you’ll need to specify the DataFieldID, the DataFieldParentID, the DataTextField and the DataValueField. In my case, I did it programmatically as follows:

1
2
3
4
5
6
7
8
9
10
11
rtvUserGroups.DataSource = dsTreeView;
 
rtvUserGroups.DataFieldID = "EmployeeID";
 
rtvUserGroups.DataFieldParentID = "ParentID";
 
rtvUserGroups.DataValueField = "EmployeeID";
 
rtvUserGroups.DataTextField = "Name";
 
rtvUserGroups.DataBind();

No comments yet.

Leave a Reply