All Controls


Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Programmatic Hierarchy Binding

 CustomerIDContact NameCompany
Data pager
Data pager
 Page 1 of 13, items 1 to 7 of 91.
ALFKIMaria AndersAlfreds Futterkiste
 OrderIDDate OrderedFreight
10643Monday, August 25, 199729.46
Unit PriceQuantityDiscount
10692Friday, October 03, 199761.02
10702Monday, October 13, 199723.94
10835Thursday, January 15, 199869.53
10952Monday, March 16, 199840.42
11011Thursday, April 09, 19981.21
ANATRAna TrujilloAna Trujillo Emparedados y helados
ANTONAntonio MorenoAntonio Moreno Taquería
AROUTThomas HardyAround the Horn
BERGSChristina BerglundBerglunds snabbköp
BLAUSHanna MoosBlauer See Delikatessen
BLONPFrédérique CiteauxBlondesddsl père et fils
In order to display hierarchical data, Telerik's ASP.NET Grid component renders one or more detail tables for each item in the MasterTableView (i.e. for each data-row that MasterTableView renders). In three level hierarchy for each item of each detail table there are one or more detail items as well. The level of hierarchy may be virtually infinite.
To bind each detail table-view, Telerik RadGrid fires the DetailTableDataBind event. The argument carries all needed information such as the table that should be data bound, parent item(s), etc. In the code of the DetailTableDataBind event handler you should write code for constructing detail data-source (list of objects) that will be used by the table to be bound to the hierarchical structure. The DataSource should be filtered in the appropriate manner, i.e. it should contain only child-records of the parent item is bound to.

Below are the main steps when binding your grid instance to hierarchical data source through the DetailTableDataBind event of the control:
  • create the grid statically/dynamically on the page
  • specify preferred settings for your grid instance through its properties.
  • attach the DetailTableDataBind event to the control after you instantiate the grid
  • assign datasources for the grid tables in the DetailTableDataBind handler of the grid. In DetailTableDataBind you can determine which datasource should be related to the currently bound GridTableView by checking its DataMember property or DataSourceID property (when using data source controls under ASP.NET 2.0). Here the DataMember/DataSourceID property must have unique value for each detail table (this value has to be defined previously by the developer). The DataSourceID is the ID of the DataSource control responsible for the corresponding detail table content generation.
This online demo demonstrates the hierarchy model of Telerik RadGrid. A three level hierarchy is demonstrated with Customer Master Table and two nested Detail Tables Orders and OrderDetails using DetailTablesDataBind event.

Note that hierarchical grid structure is not supported with simple data-binding (calling DataBind()). See the Simple data binding demo from the Populating with data section for more info about the limitations of this binding mode.
Show code in new window Demo isolation steps
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.DataBinding.ProgrammaticHierarchy.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Programmatic binding in hierarchical ASP.NET GridView | RadGrid demo</title>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
    <telerik:RadGrid ID="RadGrid1" runat="server" Width="95%" ShowStatusBar="true" AutoGenerateColumns="False"
        PageSize="7" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True"
        OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnNeedDataSource="RadGrid1_NeedDataSource"
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <MasterTableView Width="100%" DataKeyNames="CustomerID" AllowMultiColumnSorting="True">
                <telerik:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%">
                        <telerik:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%">
                                <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                        <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                        <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                            DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
                        <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
                            DataField="Freight" UniqueName="Freight">
                <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"