PanelBar - Hierarchical Data Binding

  • Politics
    • CNN
    • NBC
    • ABC
  • Sports
    • US Sports
      • Baseball
      • Football
      • BasketBall
    • European Sports
      • Soccer
      • Volleyball
  • Events
    • Oscar Awards
    • MTV Movie Awards

Demo Configurator


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

RadPanelBar 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   

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

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

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


[VB]
Protected Sub RadPanelBar1_ItemDataBound(ByVal sender As Object, _
ByVal e As Telerik.Web.UI.RadPanelBarEventArgs) Handles RadPanelBar1.ItemDataBound
e.Item.ToolTip = "Read more about " + _
CStr(DataBinder.Eval(e.Item.DataItem, "Text"))
End Sub

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="PanelBar.Examples.PopulatingWithData.HierarchicalBinding.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!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-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" Height="300" Width="100%" ExpandMode="FullExpandedItem">
        </telerik:RadPanelBar>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View Title="Select a datasource">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" CssClass="checkbox-list-h"
                    OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
                    Style="margin-left: 20px;">
                    <asp:ListItem Value="DataSet" Selected="True">DataSet</asp:ListItem>
                    <asp:ListItem Value="IEnumerable">IEnumerable</asp:ListItem>
                </asp:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?