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

Declarative Relations

CustomerIDContact NameCompany 
 Page 1 of 13, items 1 to 7 of 91.
ALFKIMaria AndersAlfreds Futterkiste
 
OrderIDDate Ordered Freight
10643Monday, August 25, 199729.46
 
Unit PriceQuantity Discount
18.00210.25
45.60150.25
12.0020.25
10692Friday, October 3, 199761.02
10702Monday, October 13, 199723.94
10835Thursday, January 15, 199869.53
10952Monday, March 16, 199840.42
11011Thursday, April 9, 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
  • Hierarchy Load Mode



This example shows the advanced hierarchy model of Telerik RadGrid. You can set the table relations declaratively or programmatically through the GridTableView.ParentTableRelation property. Each entry in this collection consists of a relation key names. These key names have to be also populated in each GridTableView DataKeyNames array. When these properties are specified correctly, Telerik RadGrid will be able to determine the child records of each GridTableView when the control builds the hierarchy, without handling the DetailTableDataBind event.

In order to achieve this you must set the ParentTableRelation property of every detail table view to indicate how its data table links to the parent table view's data table.
ParentTableRelation is a collection of GridRelationFields objects. Each object specifies the link between a single field in the detail table and the corresponding field in the parent table. It does this using two properties:
  • The MasterKeyField property is the name of a field in the data source of the parent table. This property must match exactly a string in the DataKeyNames collection of the parent table view.
  • The DetailKeyField property is the name of a field in the data source of the child table whose value must match the parent field specified by MasterKeyField. If you are using declarative data sources, this string must match exactly the name of a SELECT parameter in the detail table view's data source.
To summarize, you need to define the ParentTableRelations/DataKeyNames for the MasterTableView/GridTableViews according to the database relations conventions. And here are the exact conventions:
  • the primary key column name for each table in the grid source (used for master/detail table population) should be added to the DataKeyNames collection of the respective master/detail table;
  • the MasterKeyField in the GridRelationFields should match the primary key of the parent table in the corresponding relation;
  • the DetailKeyField in the GridRelationFields should match the foreign key of the child table in the corresponding relation.
There is one more detail if you use declarative binding using DataSource controls under .NET 2.x/3.x:You should have WHERE clause in the SelectCommand of the second DataSource control which to filter the records for the child table. The WHERE clause should include the DetailKeyField from the ParentTableRelation definition between the master/child table. Furthermore, that same field has to be included in the SelectParameters of the second DataSource (with exactly the same Name value)

An important detail is that every GridRelationFields should have only one field name for DetailKeyField and MasterKeyField. For multi-hierarchy relations you can use multiple relation fields as in the example below:

<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="ID1" MasterKeyField="ID1" />
<telerik:GridRelationFields DetailKeyField="ID2" MasterKeyField="ID2" />
<telerik:GridRelationFields DetailKeyField="ID3" MasterKeyField="ID3" />
</ParentTableRelation>

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.

You can also check out the different load modes of the grid by changing the setting at the top of the demo

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Hierarchy.DeclarativeRelations.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<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 no-bg">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" OnPreRender="RadGrid1_PreRender" ShowStatusBar="true"
            DataSourceID="SqlDataSource1" runat="server" AutoGenerateColumns="False" PageSize="7"
            AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True" GridLines="None">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView EnableHierarchyExpandAll="true" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True">
                <DetailTables>
                    <telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="OrderID" DataSourceID="SqlDataSource2" Width="100%"
                        runat="server">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID"></telerik:GridRelationFields>
                        </ParentTableRelation>
                        <DetailTables>
                            <telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="OrderID" DataSourceID="SqlDataSource3" Width="100%"
                                runat="server">
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID"></telerik:GridRelationFields>
                                </ParentTableRelation>
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                        DataField="UnitPrice" UniqueName="UnitPrice">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                        DataField="Quantity" UniqueName="Quantity">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                        DataField="Discount" UniqueName="Discount">
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <SortExpressions>
                                    <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                                </SortExpressions>
                            </telerik:GridTableView>
                        </DetailTables>
                        <Columns>
                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                DataField="OrderID" UniqueName="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>
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                        </SortExpressions>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                        DataField="CustomerID" UniqueName="CustomerID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                        DataField="ContactName" UniqueName="ContactName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                        DataField="CompanyName" UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
                </SortExpressions>
            </MasterTableView>
        </telerik:RadGrid>
        </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
        runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"
        runat="server">
        <SelectParameters>
            <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string"></asp:SessionParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Order Details] where OrderID = @OrderID"
        runat="server">
        <SelectParameters>
            <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32"></asp:SessionParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Hierarchy Load Mode">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="hierarchyLoadMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="hierarchyLoadMode_SelectedIndexChanged">
                    <asp:ListItem Text="Server"></asp:ListItem>
                    <asp:ListItem Text="ServerOnDemand" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Conditional"></asp:ListItem>
                    <asp:ListItem Text="Client"></asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance