GridView Inside GridView In Asp.Net Master Detail Example

In this example i am explaining how to create Nested GridView Inside Gridview To Show Master Detail Or Parent Child Data In Asp.Net Using C# VB.NET.

For this i have used northwind database and customers and Orders table to display data.

Drag SqlDataSource1 on page and configure it to fetch data Customers table and select CustomerID and CustomerName fields in select statement.

Drag and drop sqlDataSource2 on the page and configure it to fetch data from Orders table based on customer id in where clause.



Place one gridview on the page and set SqlDataSource1 as it's datasource.

Create one TemplateField field in this gridview and put another gridview inside ItemTemplate and provide SqlDataSOurce2 as it's datasource, set it's visible property to False.

Complete HTML source of page will look like shown below.

HTML SOURCE OF THE PAGE

<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" 
              AllowPaging="True" 
              AutoGenerateColumns="False" 
              DataKeyNames="CustomerID" 
              DataSourceID="SqlDataSource1" 
onselectedindexchanged="GridView1_SelectedIndexChanged">
<RowStyle VerticalAlign="Top" />
<Columns>
<asp:BoundField DataField="CustomerID" 
                HeaderText="CustomerID" 
                ReadOnly="True" 
                SortExpression="CustomerID" />

<asp:BoundField DataField="CompanyName" 
                HeaderText="CompanyName" 
                SortExpression="CompanyName" />
                
<asp:CommandField ShowSelectButton="True" 
                  SelectText="Show Details"/>
               
<asp:TemplateField>
<ItemTemplate>
<asp:GridView ID="GridView2" runat="server" 
              AutoGenerateColumns="False" 
              DataKeyNames="OrderID" 
              DataSourceID="SqlDataSource2" 
              Visible="false">
<Columns>
<asp:BoundField DataField="OrderID" 
                HeaderText="OrderID" 
                InsertVisible="False" 
                ReadOnly="True" 
                SortExpression="OrderID" />
<asp:BoundField DataField="OrderDate" 
                HeaderText="OrderDate" 
                SortExpression="OrderDate" />
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" 
                   runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT [CustomerID], [CompanyName] 
               FROM [Customers]">
</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" 
                   runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT [OrderID], [OrderDate] 
               FROM [Orders] 
               WHERE ([CustomerID] = @CustomerID)">
<SelectParameters>
<asp:Parameter Name="CustomerID" Type="String"/>
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>

Now generate SelectedIndexChanged event for parent gridview (GridView1) and write code mentioned below.

C# CODE BEHIND

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {
        foreach (GridViewRow gvRow in GridView1.Rows)
        {
            gvRow.FindControl("GridView2").Visible = false;
        }
        SqlDataSource2.SelectParameters[0].DefaultValue = GridView1.SelectedDataKey[0].ToString();
        GridView1.SelectedRow.FindControl("GridView2").Visible = true;
    }

VB.NET CODE BEHIND

Protected Sub GridView1_SelectedIndexChanged(sender As Object, e As EventArgs)
 For Each gvRow As GridViewRow In GridView1.Rows
  gvRow.FindControl("GridView2").Visible = False
 Next
 SqlDataSource2.SelectParameters(0).DefaultValue = GridView1.SelectedDataKey(0).ToString()
 GridView1.SelectedRow.FindControl("GridView2").Visible = True
End Sub

Build and run the application.

Tweet

If you like this post than join us or share