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

Master/Detail Grids

Customers:

Customer IDCompany NameContact NameAddress
12345678910...
Page size:
 91 items in 19 pages
ALFKIAlfreds FutterkisteMaria AndersObere Str. 57
ANATRAna Trujillo Emparedados y heladosAna TrujilloAvda. de la Constitución 2222
ANTONAntonio Moreno TaqueríaAntonio MorenoMataderos 2312
AROUTAround the HornThomas Hardy120 Hanover Sq.
BERGSBerglunds snabbköpChristina BerglundBerguvsvägen 8


Orders:

OrderIDOrderDateShipCountry
12
Page size:
 6 items in 2 pages
106438/25/1997Germany
1069210/3/1997Germany
1070210/13/1997Germany
108351/15/1998Germany
109523/16/1998Germany


Orders details:

Unit priceQuantityDiscount (%)
45.60150.25
18.00210.25
12.0020.25

There are scenarios in which you may want to present dependent grids (filtering the records in the second grid according to the selection in the first) to enrich the user experience and make the interaction between these grid easier and more intuitive. Telerik RadGrid supports this feature out-of-the-box in a similar means as the MS GridView. 

In the demo, the first grid presents Customers, the second grid visualizes the relevant Orders and the third grid shows the Order Details for the selected order.

Here is how to implement this behavior:

  1. Add the primary key field for the related grid to the DataKeyNames array of the master grid's MasterTableView. It must be the first field in the list.
  2. Construct a SelectParameter of type ControlParameter for the child grid data source control. Here is how to set its properties:
    • ControlID: must point to the ID of the master grid
    • Name: must match the primary key value added previously to the master grid
    • PropertyName: must be SelectedValue.
    • DefaultValue and Type: set them according to your data.
  3. If you have more than one field name in the DataKeyNames collection of the master grid, use the following setup:
    • PropertyName: SelectedValues['<FieldName>'] where <FieldName> represents a column in the data source.

The functionality depicted above is enhanced to be performed with ajax requests (ajaxifying the grids with RadAjaxManager instance, and setting ClientSettings->EnablePostBackOnRowClick = true). The row selection is made through keyboard navigation (check the Accessibility section for more details) or with client selection when row is clicked.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.DataBinding.MasterDetail.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid3" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid3" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
        <h3>Customers:</h3>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowPaging="true" PageSize="5" DataSourceID="SqlDataSource1"
            OnItemCommand="RadGrid1_ItemCommand">
            <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
                <Selecting AllowRowSelect="true"></Selecting>
            </ClientSettings>
            <MasterTableView DataKeyNames="CustomerID">
            </MasterTableView>
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        </telerik:RadGrid>
        <br />
        <br />
        <h3>Orders:</h3>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" ShowStatusBar="true" runat="server" AllowPaging="True"
            PageSize="5" DataSourceID="SqlDataSource2">
            <MasterTableView Width="100%" AutoGenerateColumns="False" DataKeyNames="OrderID"
                DataSourceID="SqlDataSource2">
                <Columns>
                    <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32" HeaderText="OrderID"
                        ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="OrderDate" DataType="System.DateTime" HeaderText="OrderDate"
                        SortExpression="OrderDate" UniqueName="OrderDate" DataFormatString="{0:d}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry"
                        UniqueName="ShipCountry">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
                <Selecting AllowRowSelect="true"></Selecting>
            </ClientSettings>
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        </telerik:RadGrid>
        <br />
        <br />
        <h3>Orders details:</h3>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid3" ShowStatusBar="true" runat="server" AllowPaging="True"
            PageSize="5" DataSourceID="SqlDataSource3">
            <MasterTableView Width="100%" AutoGenerateColumns="False" DataKeyNames="OrderID"
                DataSourceID="SqlDataSource3">
                <Columns>
                    <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="Unit price" SortExpression="UnitPrice"
                        UniqueName="UnitPrice">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity"
                        UniqueName="Quantity">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Discount" HeaderText="Discount (%)" SortExpression="Discount"
                        UniqueName="Discount">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, Address FROM Customers"
        runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [OrderDate], [CustomerID], [ShipCountry] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
        runat="server">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadGrid1" DefaultValue="ALFKI" Name="CustomerID"
                PropertyName="SelectedValue" Type="String"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [UnitPrice], [Quantity], [Discount] FROM [Order Details] WHERE ([OrderID] = @OrderID)"
        runat="server">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadGrid2" Name="OrderID" DefaultValue="10643" PropertyName="SelectedValues['OrderID']"
                Type="Int32"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance