Nested Gridview in ASP.NET

Introduction : Nested gridview means gridview within a gridview. this example will show you how we can do this and by clicking on parent gridview's row we will show the child gridview.

Database : For this I am using a employee table and the structure of this employee table is as follows:

CREATE TABLE [dbo].[employee](

       [id] [int] IDENTITY(1,1) NOT NULL,

       [name] [nvarchar](200) NULL,

       [designation] [nvarchar](200) NULL,

       [salary] [float] NULL,

       [manager] [int] NULL

) ON [PRIMARY]

I have inserted some dummy data to this table as - 

Design: I have designed a gridview for this and put another child gridview in parent gridview. The design of this is as below :

<asp:GridView ID="gvdetails" runat="server" Width="100%" AutoGenerateColumns="false"            onmousehover="this.row.select();" OnRowCreated="gridclass_RowCreated"

            onselectedindexchanged="gvdetails_SelectedIndexChanged">

        <Columns>

<asp:BoundField HeaderText="ID" DataField="id" HeaderStyle-Font-Bold="true" />

       <asp:BoundField HeaderText="Name" DataField="name" HeaderStyle-Font-Bold="true" />

<asp:BoundField HeaderText="Designation" DataField="designation" HeaderStyle-Font-                         Bold="true" />

<asp:BoundField HeaderText="Salary" DataField="salary" HeaderStyle-Font-Bold="true" />

       <asp:TemplateField>

          <ItemTemplate>

             <tr>

               <td colspan="12">

<asp:GridView ID="gvChildGrid" runat="server" CssClass="EU_DataTable1" AutoGenerateColumns="false" Width="100%" BackColor="Gray" Visible="false">

                                    <Columns>

                                        <asp:BoundField HeaderText="Jounior Name" DataField="name" HeaderStyle-HorizontalAlign="Center" />

                                    </Columns>

                                </asp:GridView>

                            </td>

                        </tr>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

Code Behind:

        To bind the parent gridview I have created a function and called it on the Page_Load() event of the page. The function is as follows - 

    public void bindmain()

    {

        SqlDataAdapter da = new SqlDataAdapter("select * from employee", con);

        DataTable dt = new DataTable();

        da.Fill(dt);

        gvdetails.DataSource = dt;

        gvdetails.DataBind();

    }

Now for further action I have executed some events of parent Gridview as follows : 

  1. Row_Created - This will design the row of parent gridview:

  protected void gridclass_RowCreated(object sender, GridViewRowEventArgs e)

    {

        if (e.Row.RowType == DataControlRowType.DataRow)

        {

            e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='none'; this.style.background='#61CFB3'";

            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none'; this.style.background='White'";

            e.Row.ToolTip = "Click to select row";

            e.Row.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(this.gvdetails, "Select$" + e.Row.RowIndex, true);

        }

    }

2. SelectedIndexChanged Event : This event will be fired when the parent gridview's row is clicked :

    protected void gvdetails_SelectedIndexChanged(object sender, EventArgs e)

    {

        int index = gvdetails.SelectedRow.RowIndex;

        string id = gvdetails.Rows[index].Cells[0].Text.Trim();

        GridView gv = (GridView)gvdetails.Rows[index].FindControl("gvChildGrid");

        if (gv.Visible == true)

        {

            gv.Visible = false;

        }

        else

        {

            SqlDataAdapter da = new SqlDataAdapter("select * from employee where manager = '" + id + "'", con);

            DataTable dt = new DataTable();

            da.Fill(dt);

            gv.DataSource = dt;

            gv.DataBind();

            gv.Visible = true;

        }

    }

Note : Put this on the page decleration part of the webpage : 

EnableEventValidation="false"

Download The Sample Here...

Safe Coding.......