TreeView - Programmatic Data Binding

DataSet (NorthWind Employees)

  • Fuller
    • Davolio
    • Leverling
    • Peacock
    • Buchanan
      • Suyama
      • King
      • Dodsworth
    • Callahan

IEnumerable

  • Products
    • Telerik UI for ASP.NET Ajax
      • RadGrid
      • RadScheduler
      • RadEditor
    • Telerik UI for Silverlight
      • RadGrid
      • RadMenu
      • RadEditor
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadTreeView fully supports binding to a wide range of datasources:

  • DataSet, DataTable, DataView
  • ASP 2.0 DataSource types including
    • Hierarchical DataSource components
    • Table-based DataSource components
    • ObjectDataSource
  • Any object that implements the IEnumerable interface

In addition, while not strictly data binding, RadTreeView can load XML content files. You can easily populate your treeview instance with only a few lines of code. The built-in data binding supports auto-binding from a a single self-referencing table with ID -> ParentID relation.

Below are the properties and methods related to data binding:

DataSource - Set to an instance of your data source. This is mandatory when binding the RadTreeView at runtime
DataSourceID - Set to the ID of your data source. This is mandatory when binding the RadTreeView declaratively
DataMember - If the data source is a DataSet and DataMember is set, then the RadTreeView is bound to the DataTable with the respective name in the DataSet. If DataMember is not set, the RadTreeView is bound to the first DataTable in the DataSet
DataFieldID - This is the field name from the data source used to uniquely identify each row. This field is required when binding to hierarchical data
DataFieldParentID - This is the field name from the data source used to identify the row for the parent node. This field is required when binding to hierarchical data
DataTextField - This is the field name from the data source that populates each node's Text property during binding
DataValueField - This is the field name from the data source that populates each node's Value property during binding
DataNavigateUrlField - This is the field name from the data source that populates each node's NavigateUrlField property during binding
DataBind - Call this method after you have set the aforementioned properties when binding at runtime. This method is mandatory for binding at runtime
MaxDataBindDepth - This property is used to determine the binding depth. If for example you want to bind only the first two levels of the treeview, you should set this property to 2. The default value of the MaxDataBindDepth property is -1, which means that all nodes will be bound. Marking the treeview instance with MaxDataBindDepth="0" will NOT bind any nodes.
AppendDataBoundNodes - If you bind the treeview using the DataBind method, all TreeNodes are automatically cleared. Setting AppendDataBoundNodes to True preserves the nodes that are already present in the treeview. This lets you bind RadTreeView to multiple data sources or use both unbound and bound modes.

If you need to map additional fields from the Data Source to properties of the RadTreeView item, you can use the NodeDataBound event.

[C#]
protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)
{
e.Node.ToolTip = (e.Node.DataItem as DataRowView)["Description"].ToString();
}


[VB]
Protected Sub RadTreeView1_NodeDataBound(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs)
e.Node.ToolTip = (TryCast(e.Node.DataItem, DataRowView))("Description").ToString()
End Sub

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Programming.DataBinding.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <h2>DataSet (NorthWind Employees)</h2>

            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server"  Width="300px" Height="350px">
                <DataBindings>
                    <telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
                </DataBindings>
            </telerik:RadTreeView>
        </div>
        <div class="demo-container size-thin">
            <h2>IEnumerable</h2>

            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server"  Width="300px" Height="350px">
                <DataBindings>
                    <telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
                </DataBindings>
            </telerik:RadTreeView>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?