Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Programmatic Binding

 CustomerIDContact NameCompany
 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

  • In order to display hierarchical data, Telerik RadGrid 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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Programming.DetailTableDataBind.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB"></telerik:Header>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <!-- content start -->
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadGrid ID="RadGrid1" runat="server" Width="95%" ShowStatusBar="true"
                AutoGenerateColumns="False" PageSize="7" AllowSorting="True" AllowMultiRowSelection="False"
                AllowPaging="True">
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <MasterTableView Width="100%" 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> <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451