Nested gridview example Or Gridview inside gridview in Asp.net

In this article I will explain How to create Nested Gridview or Gridview inside gridview in ASP.NET

Below are the screen shorts for the design of the Nested Gridview or Gridview inside gridview.

In my previous article I explained How to upload or Save files in folder and download files when click on Download link in gridview using asp.net , How to insert images into our project folder and display the images in gridview using asp.net , How to bind data to Dropdown list in Gridview row databound event , How to implement cascading dropdown list in gridview using asp.net , How to highlight gridview rows on mouseover and on mouseout event .

Below is the design code for Gridview in ASP.NET

<asp:GridView ID="gvParentGrid" runat="server" Width="400"

        AutoGenerateColumns="false" GridLines="none"

        BorderStyle="Solid" BorderWidth="1px" BorderColor="#df5015" OnRowCommand="gvParentGrid_RowCommand">

        <HeaderStyle BackColor="Green" Font-Bold="true" ForeColor="Yellow" />

        <RowStyle BackColor="#E1E1E1" />

        <AlternatingRowStyle BackColor="White" />     

        <Columns>

            <asp:TemplateField ItemStyle-Width="200px" HeaderText="StateID" HeaderStyle-HorizontalAlign="Left">

                <ItemTemplate>

                    <asp:LinkButton runat="server" ID="lblStateID" Text='<%# Eval("StateID") %>'

                        CommandArgument="<%# Container.DataItemIndex %>"

                        CommandName="ParentDrill"></asp:LinkButton>

                </ItemTemplate>

            </asp:TemplateField>          

            <asp:BoundField DataField="StateName" HeaderText="State Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="600px" ItemStyle-HorizontalAlign="Left" />           

            <asp:TemplateField>

                <ItemTemplate>

                    <tr>

                        <td colspan="100%" align="center">

                            <div id="div<%# Eval("StateID") %>">

                                <asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false" BorderStyle="Solid"

                                    BorderColor="#df5015" GridLines="Both" Width="350">

                                     <HeaderStyle BackColor="Green" Font-Bold="true" ForeColor="Yellow" />

                                    <RowStyle BackColor="#E1E1E1" />

                                    <AlternatingRowStyle BackColor="White" />                                   

                                    <Columns>

                                        <asp:BoundField DataField="CityID" HeaderText="City ID" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="70px" />

                                        <asp:BoundField DataField="CityName" HeaderText="City Name" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="60px" />

                                        </Columns>

                                </asp:GridView>                               

                            </div>

                        </td>

                    </tr>

                </ItemTemplate>

            </asp:TemplateField>

        </Columns>

    </asp:GridView>

Below is the total C# code for Nested GridView.

using System;

using System.Data.SqlClient;

using System.Data;

using System.Web.UI.WebControls;

public partial class gvNestedGrid : System.Web.UI.Page

{

    SqlConnection con = new SqlConnection("server=LocalHost;database=practice;uid=sa1;pwd=g@123;MultipleActiveResultSets=True");

    DataSet dsState = new DataSet();

    DataSet dsCity = new DataSet();

    protected void Page_Load(object sender, EventArgs e)

    {

        if(!IsPostBack)

        {

            ParentGrid();

        }

    }

    void ParentGrid()

    {

        SqlCommand cmd = new SqlCommand("Select * from tblState", con);

        SqlDataAdapter daUserData = new SqlDataAdapter(cmd);

        daUserData.Fill(dsState);

        gvParentGrid.DataSource = dsState;

        gvParentGrid.DataBind();

    }

    protected void gvParentGrid_RowCommand(object sender, GridViewCommandEventArgs e)

    {

        if (e.CommandName == "ParentDrill")

        {

            ParentGrid();

            GridView gvChildGrid = this.gvParentGrid.Rows[Convert.ToInt32(e.CommandArgument)].FindControl("gvChildGrid") as GridView;

            LinkButton lblStateID = this.gvParentGrid.Rows[Convert.ToInt32(e.CommandArgument)].FindControl("lblStateID") as LinkButton;

            SqlCommand cmd = new SqlCommand("Select * from tblCity where Stateid='" + lblStateID.Text + "' ", con);

            SqlDataAdapter daUserData = new SqlDataAdapter(cmd);

            daUserData.Fill(dsCity);

            gvChildGrid.DataSource = dsCity;

            gvChildGrid.DataBind();

        }

    }

}