Nested Gridview with Expand/Collapse Functionality

Here in this example, I am going to show you how to create Nested Gridview with Expand and Collapse Functionality.

I have used java script to add the expandable and collapsible functionality in nested gridview by displaying plus and minus image. I have used Subjects and SubjectUnits tables to populate the nested gridviews. 

Drag and drop the Gridview control from toolbox and add two template fields with in <Columns> tag one as first column and one as last column of gridview. Now add SQLDataSource  from toolbox and configure it. The HTML source will be look like as shown below-

<asp:GridView ID="grdParent" runat="server" DataKeyNames="SubId"

            AutoGenerateColumns="False" onrowdatabound="grdParent_RowDataBound"

            DataSourceID="SqlDataSource1" GridLines="None"

            Width="500px" BorderStyle="Solid" BorderWidth="1px">

            <Columns>

            <asp:TemplateField>

            <ItemTemplate>

                        <a href="javascript:collapseExpand('SubId_<%# Eval("SubId") %>');">

                            <img id="imageSubId_<%# Eval("SubId") %>" alt="Click to show/hide orders"

                                border="0" src="Images/bullet_toggle_plus.jpg" /></a>

                    </ItemTemplate>

            </asp:TemplateField>

            <asp:BoundField DataField="SubId" HeaderText="Subject Id" />

            <asp:BoundField DataField="SubCode" HeaderText="Subject Code" />

            <asp:BoundField DataField="SubName" HeaderText="Subject Name" />

            <asp:TemplateField>

            <ItemTemplate>

            <tr>

            <td colspan="100%">

            <div id="SubId_<%# Eval("SubId") %>" style="display: none; position: relative; left: 25px;">

            <asp:GridView ID="grdChild" runat="server" AutoGenerateColumns="False" DataKeyNames="UnitId" Width="90%">           

            <Columns>

            <asp:BoundField DataField="UnitName" HeaderText="Unit Name" />

            <asp:BoundField DataField="UnitDescription" HeaderText="Description" />

            <asp:BoundField DataField="UnitSessionNumber" HeaderText="No. of Session" />

            </Columns>

            </asp:GridView>

            </div>

            </td>

            </tr>

            </ItemTemplate>

            </asp:TemplateField>

            </Columns>

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"

            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

            SelectCommand="SELECT * FROM [Subjects]"></asp:SqlDataSource>

Add the following JavaScript code in head section of page.

<script type="text/javascript">

   function collapseExpand(obj) {

      var gvObject = document.getElementById(obj);

      var imageID = document.getElementById('image' + obj);

if (gvObject.style.display == "none") {

                gvObject.style.display = "inline";

                imageID.src = "Images/bullet_toggle_minus.jpg";

       }

       else {

                gvObject.style.display = "none";

                imageID.src = "Images/bullet_toggle_plus.jpg";

        }

   }

</script>

Now, Write the following code on RowDataBound event of parent gridview to bind the child gridview with data.

protected void grdParent_RowDataBound(object sender, GridViewRowEventArgs e)

{

  try

  {

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

    {

       string strSubId = DataBinder.Eval(e.Row.DataItem, "SubId").ToString();

       GridView grdChild = (GridView)e.Row.FindControl("grdChild");

       SqlDataSource grdChildDataSource = new SqlDataSource();

       grdChildDataSource.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();

       grdChildDataSource.SelectCommand = "select * from SubUnits where SubId='" + strSubId + "'";

        grdChild.DataSource = grdChildDataSource;

         grdChild.DataBind();

     }

   }

   catch (Exception ex)

   {

   }

}

Build the application and run it to test the functionality.
Happy coding!!