Grid - Master/Detail Grids

Customers:

Customer IDCompany NameContact NameAddress
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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

There are scenarios in which you may want to present dependant 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.

Moreover this demo presents the great interoperability between the RadGrid control and AJAX. The Grid controls are ajaxified using RadAjaxManager, so the interaction between the separate Grid controls is performed with AJAX requests.

In the demo above the first grid presents Customers, the second grid visualizes the relevant Orders and the third grid shows the Order Details for the selected order. The main points for attaining this behavior are:

  • add the primary key field for the related grid to the DataKeyNames array of its MasterTableView
  • construct SelectParameter of type ControlParameter for the connected grid data source control. The ControlID of that SelectParameter should point to the related grid, the Name property should match the primary key value added previously as first to the DataKeyNames array, the PropertyName should be SelectedValue. You can also add DefaultValue and Type attributes.
  • Alternatively, define similar SelectParameter using SelectedValues['<FieldName>'] where <FieldName> represents a column in the grid source.

The functionality depicted beforehand 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.DataBinding.MasterDetail.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>
                    <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>

Find Assistance

Help Us Improve

Was this example helpful?