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
45.60150.25
18.00210.25
12.0020.25
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
Isolate this demo as a stand-alone application

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: 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.
<%@ 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" "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" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg">
        <telerik:RadGrid ID="RadGrid1" runat="server" ShowStatusBar="true" AutoGenerateColumns="False"
            PageSize="7" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True"
            OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnNeedDataSource="RadGrid1_NeedDataSource"
            OnPreRender="RadGrid1_PreRender">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView DataKeyNames="CustomerID" AllowMultiColumnSorting="True">
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%">
                        <DetailTables>
                            <telerik:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%">
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                        DataField="UnitPrice">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                        DataField="Quantity">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                        DataField="Discount">
                                    </telerik:GridBoundColumn>
                                </Columns>
                            </telerik:GridTableView>
                        </DetailTables>
                        <Columns>
                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                DataField="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                                DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:D}">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
                                DataField="Freight" UniqueName="Freight">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                        DataField="CustomerID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                        DataField="ContactName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                        DataField="CompanyName">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?