TabStrip - Hierarchy and DataBindings

Binding to Hierarchical Datasource



  • Politics
  • Sports
  • Events
  • CNN
  • NBC
  • ABC

Using DataBindings Settings to Control Hierarchical Levels

  • Politics
  • Sports
  • Events
  • Level 1 > CNN
  • Level 1 > NBC
  • Level 1 > ABC

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadTabStrip fully supports binding to a wide range of datasources:

  • DataSet, DataTable, DataView
  • ASP.NET DataSource types including
    • Hierarchical DataSource components, such as SiteMapDataSource
    • Table-based DataSource components, such as SqlDataSource, LinqDataSource, EntityDataSouce, ObjectDataSource
    • ObjectDataSource
  • Any object that implements the IEnumerable interface   

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 RadTabStrip at runtime.
DataSourceID - Set to the ID of your data source. This is mandatory when binding the RadTabStrip declaratively.
DataMember - If the data source is a DataSet and DataMember is set, then the RadTabStrip is bound to the DataTable with the respective name in the DataSet. If DataMember is not set, the RadTabStrip 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 tab. This field is required when binding to hierarchical data.
DataTextField - This is the field name from the data source that populates each tab's Text property during binding.
DataValueField - This is the field name from the data source that populates each tab's Value property during binding.
DataNavigateUrlField - This is the field name from the data source that populates each tab'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 tabstrip, you should set this property to 2. The default value of the MaxDataBindDepth property is -1, which means that all tabs will be bound. Marking the tabstrip instance with MaxDataBindDepth="0" will NOT bind any tabs.
AppendDataBoundItems - If you bind the tabstrip using the DataBind method, all tabs are automatically cleared. Setting AppendDataBoundItems to True preserves the tabs that are already present in the tabstrip. This lets you bind RadTabStrip to multiple data sources or use both unbound and bound modes.

If the data source contains fields that map to other properties of tabs or to custom attributes, use the TabDataBound event to set those values:

[C#]
protected void RadTabStrip1.TabDataBound(object sender,
Telerik.Web.UI.RadTabStripEventArgs e)
{
e.Tab.ToolTip ="Read more about " +
(string) DataBinder.Eval(e.Tab.DataItem, "Text");
}


[VB]
Protected Sub RadTabStrip1_TabDataBound(ByVal sender As Object, _
ByVal e As Telerik.Web.UI.RadTabStripEventArgs) Handles RadTabStrip1.TabDataBound
e.Tab.ToolTip = "Read more about " + _
CStr(DataBinder.Eval(e.Tab.DataItem, "Text"))
End Sub

The DataBindings collection lets you provide different sets of data bindings to the tabs on different levels of the tabstrip.
You can even bind the tabs on each level of the tabstrip from different tables in a DataSet.
This example demonstrates how to use databindings to apply declarative mapping of data fields to the tab properties.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TabStrip.Examples.PopulatingWithData.HierarchicalDataBinding.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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <h2>Binding to Hierarchical Datasource</h2>
        <p>
            <asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server"
                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                <asp:ListItem Value="DataSet" Selected="True">DataSet</asp:ListItem>
                <asp:ListItem Value="IEnumerable">IEnumerable</asp:ListItem>
            </asp:RadioButtonList>
            <br />
            <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip1" SelectedIndex="0" MaxDataBindDepth="3" >
            </telerik:RadTabStrip>
        </p>
    </div>
    <div class="demo-container size-medium">
        <h2>Using DataBindings Settings to Control Hierarchical Levels</h2>
        <p>
            <telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip2" SelectedIndex="0" DataSourceID="SqlDataSource1"
                DataFieldID="id" DataFieldParentID="parentID" >
                <DataBindings>
                    <telerik:RadTabBinding TextField="Text"></telerik:RadTabBinding>
                    <telerik:RadTabBinding FormatString="Level 1 > {0}" TextField="Text" Depth="1"></telerik:RadTabBinding>
                </DataBindings>
            </telerik:RadTabStrip>
            <asp:SqlDataSource runat="server" ID="SqlDataSource1"
                ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                ProviderName="System.Data.SqlClient"
                SelectCommand="SELECT id, text, parentId from Links"></asp:SqlDataSource>
        </p>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?