New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Binding to Table-Based DataSource

Table-based DataSource components, such as SqlDataSource and AccessDataSource can be used to bind the panel declaratively at design time. As with binding to a DataSet, DataTable, or DataView, you can use the ID-ParentID relation to establish a hierarchy among the panel items.

The Binding to a Data Source tutorial gives step-by-step instructions for binding RadPanelBar to an AccessDataSource .

To bind to a table-based DataSource component:

  1. Drag the DataSource component from the toolbox onto the same page as your RadPanelBar component.

  2. Configure the DataSource component to connect to the data.

  3. Set the DataSourceID property of your RadPanelBar to the ID of the DataSource component you added in step 1.

  4. Set the DataTextField, DataValueField, and DataNavigateUrlField properties to indicate the columns of the database table that supply values for the Text, Value, and NavigateUrl properties of panel items.

  5. Establish the panel hierarchy by setting the DataFieldID property to the key field for records, and the DataFieldParentID property to the field that gives the key field value of the parent item.

    The ParentID of the root items must be null (nothing). If for some reason the data source comes without null values for the ParentID column, use a query that returns the expected value (null). For example:

    SELECT ID, Text, IF(ParentID = 0, NULL, ParentID) FROM tblDat

  6. Bind any additional properties of the panel items using the ItemDataBound event:


protected void RadPanelBar1_ItemDataBound(object sender, Telerik.Web.UI.RadPanelBarEventArgs e) 
{ 
    e.Item.ToolTip = (string)DataBinder.Eval(e.Item.DataItem, "ToolTip"); 
}


Protected Sub RadPanelBar1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadPanelBarEventArgs) Handles RadPanelBar1.ItemDataBound
    e.Item.ToolTip = CStr(DataBinder.Eval(e.Item.DataItem, "ToolTip"))
End Sub

The resulting declaration looks something like the following:

<telerik:RadPanelBar
    runat="server"
    ID="RadPanelBar1"
    DataSourceID="SqlDataSource1"
    DataFieldID="id"
    DataFieldParentID ="parentID"
    DataTextField="Targetname"
    DataNavigatUrlField ="target"
    OnItemDataBound ="RadPanelBar1_ItemDataBound">
</telerik:RadPanelBar>
<asp:SqlDataSource
      runat="server"
      ID="SqlDataSource1"
      ConnectionString ="Persist Security Info=False;Integrated Security=true;Initial Catalog=MyDB;server=(local)"
      ProviderName="System.Data.SqlClient"
      SelectCommand="SELECT id, Targetname, target, tooltip, parentId from panelTable" />

See Also

In this article