Collapsible GridView in ASP.Net 2.0

This article explains how to create a collapsible and expandable gridview in asp.net 2.0 using javascript.

Add this script below to the title in head section. 

<script type="text/javascript">

    function OnImageClick(Obj,PnlId)
    {
        var Src=Obj.src.split("/")[Obj.src.split("/").length-1];
        if(Src=="Down.png")
        {
            document.getElementById(Obj.id).src="Images/Up.png";
            document.getElementById(Obj.id).title="Expand";
            document.getElementById(PnlId).style.display="block";
        }
        else if(Src=="Up.png")
        {
            document.getElementById(Obj.id).src="Images/Down.png";
            document.getElementById(Obj.id).title="Collapse";
            document.getElementById(PnlId).style.display="none";
        }
    }
</script>

Drag and drop a gridview to your webform and design like this, 

<asp:GridView ID="GVParent" AutoGenerateColumns="false" HorizontalAlign="center" runat="server" OnRowDataBound=" GVParent_RowDataBound" BorderColor="WhiteSmoke" BorderStyle="Solid" BorderWidth="1px">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <table border="0" cellpadding="1" cellspacing="0">
                                <tr style="background-color:#4682b4; color:White">
                                    <td align="center" style="width: 20px" valign="top">
                                    </td>
                                    <td align="center" style="width: 75px" valign="top">
                                        Regno</td>
                                    <td align="left" style="width: 300px" valign="top">
                                        Student Name</td>
                                    <td align="center" style="width: 75px" valign="top">
                                        Total</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table border="0" cellpadding="1" cellspacing="0">
                                <tr>
                                    <td align="center" style="width: 20px" valign="top">
                                        <asp:Image ID="Img" ImageUrl="~/Images/Down.png" runat="server" />
                                    </td>
                                    <td align="center" style="width: 75px" valign="top">
                                        <asp:Label ID="lblRegno" runat="server" Text='<%# Eval("Regno") %>'></asp:Label>
                                    </td>
                                    <td align="left" style="width: 300px" valign="top">
                                        <%# Eval("Name") %>
                                    </td>
                                    <td align="center" style="width: 75px" valign="top">
                                        <%# Eval("Total") %>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td align="left" colspan="3" valign="baseline" style="padding-left: 25px">
                                        <asp:Panel ID="PnlChild" runat="server" style="display:none">
                                            <asp:GridView ID="GVChild" runat="server" AutoGenerateColumns="false" Width="300" BorderColor="WhiteSmoke"
BorderStyle="Solid" BorderWidth="1px">
                                                <EmptyDataTemplate>
                                                    <asp:Label ID="Label1" runat="server" Text="No Data to Display" Font-Bold="true"
                                                        Font-Names="Calibri" ForeColor="red"></asp:Label>
                                                </EmptyDataTemplate>
                                                <Columns>
                                                    <asp:TemplateField HeaderText="Slno">
                                                        <ItemTemplate>
                                                            <%# Container.DataItemIndex + 1 %>
                                                        </ItemTemplate>
                                                        <ItemStyle HorizontalAlign="Center" Width="50px" />
                                                    </asp:TemplateField>
                                                    <asp:BoundField DataField="Subject" HeaderText="Subject" />
                                                    <asp:BoundField DataField="TestName" HeaderText="Test" >
                                                        <ItemStyle HorizontalAlign="Center" />
                                                    </asp:BoundField>
                                                    <asp:BoundField DataField="Marks" HeaderText="Marks" NullDisplayText="0" >
                                                        <ItemStyle HorizontalAlign="Center" />
                                                    </asp:BoundField>
                                                </Columns>
                                                <RowStyle BackColor="White" />
                                                <HeaderStyle BackColor="SteelBlue" ForeColor="White" />
                                                <AlternatingRowStyle BackColor="WhiteSmoke" />
                                            </asp:GridView>
                                        </asp:Panel>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <RowStyle Font-Names="Calibri" />
                <HeaderStyle Font-Names="Calibri" />
                <AlternatingRowStyle BackColor="WhiteSmoke" Font-Names="Calibri" />
            </asp:GridView>

Bind the parent gridview. 

protected void Page_Load(object sender, EventArgs e)
{
try
      {
            if (!IsPostBack)
            {
                  BindParentGrid(); //bind parent gridview with your data.
            }
      }
      catch (Exception Ex)
      { Response.Write(Ex.Message); }
}

Now bind the child gridview in parent gridview RowDataBound event.

protected void GVParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
      try
      {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                Label lblRegno = e.Row.Cells[0].FindControl("lblRegno") as Label;
                Panel PnlChild = e.Row.Cells[0].FindControl("PnlChild") as Panel;
                GridView GVChild = e.Row.Cells[0].FindControl("GVChild") as GridView;
                Image Img = e.Row.Cells[0].FindControl("Img") as Image;

                Img.Attributes.Add("onclick", "OnImageClick(this,'" + PnlChild.ClientID + "')");
                  BindChildGrid(lblRegno.Text); // here passing student regno as parameter to fill child grid
            }
      }
      catch (Exception Ex)
      { Response.Write(Ex.Message); }
}

Images to download



Thanks,

Raghavendra