Nested GridView in Show/Hide Child GridView on icon Click using C#.Net

Follow these steps .

<form id="form1" runat="server">

<asp:GridView ID="GridView1"

runat="server"

DataKeyNames="CustomerID" AutoGenerateColumns="false"

OnRowDataBound="gv_RowDataBound" Width="80%"

AllowPaging="True" PageSize="20" >

<HeaderStyle CssClass="dataTable" />

<RowStyle CssClass="dataTable" />

<AlternatingRowStyle CssClass="dataTableAlt" />

<Columns>

<asp:TemplateField>

<ItemTemplate>

<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'one');">

<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button.png" />

</a>

</ItemTemplate>

<AlternatingItemTemplate>

<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'alt');">

<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button.png" />

</a>

</AlternatingItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" />

<asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" />

<asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" />

<asp:TemplateField>

<ItemTemplate>

</td></tr>

<tr>

<td colspan="100%" >

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

<asp:GridView ID="GridView2" runat="server" Width="80%"

AutoGenerateColumns="false" DataKeyNames="ItemCode"

EmptyDataText="No orders for this customer." >

<HeaderStyle CssClass="dataTable" />

<AlternatingRowStyle CssClass="dataTableAlt" />

<RowStyle CssClass="dataTable" />

<Columns>

<asp:BoundField DataField="OrderDate" HeaderText="Order Date" HtmlEncode="False" />

<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate" HtmlEncode="False" />

<asp:BoundField DataField="ShipTO" HeaderText="Ship TO" />

</Columns>

</asp:GridView>

</div>

</td>

</tr>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</form>

- See more at: http://www.ashishblog.com/nested-gridview-in-showhide-effect-using-c-net/#sthash.olZiQizs.dpuf

<form id="form1" runat="server">
<asp:GridView ID="GridView1"
runat="server"
DataKeyNames="CustomerID" AutoGenerateColumns="false"
OnRowDataBound="gv_RowDataBound" Width="80%"
AllowPaging="True" PageSize="20" >
<HeaderStyle CssClass="dataTable" />
<RowStyle CssClass="dataTable" />
<AlternatingRowStyle CssClass="dataTableAlt" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'one');">
<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button.png" />
</a>
</ItemTemplate>
<AlternatingItemTemplate>
<a href="javascript:switchViews('div<%# Eval("CustomerID") %>', 'alt');">
<img id="imgdiv<%# Eval("CustomerID") %>" alt="Click to show/hide orders" border="0" src="Images/expand_button.png" />
</a>
</AlternatingItemTemplate>
</asp:TemplateField>

<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" HtmlEncode="False" />
<asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="False" />
<asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="False" />
<asp:TemplateField>
<ItemTemplate>
</td></tr>
<tr>
<td colspan="100%" >
<div id="div<%# Eval("CustomerID") %>" style="display:none;position:relative;left:25px;" >
<asp:GridView ID="GridView2" runat="server" Width="80%"
AutoGenerateColumns="false" DataKeyNames="ItemCode"
EmptyDataText="No orders for this customer." >
<HeaderStyle CssClass="dataTable" />
<AlternatingRowStyle CssClass="dataTableAlt" />
<RowStyle CssClass="dataTable" />
<Columns>
<asp:BoundField DataField="OrderDate" HeaderText="Order Date" HtmlEncode="False" />
<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate" HtmlEncode="False" />
<asp:BoundField DataField="ShipTO" HeaderText="Ship TO" />

</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>



protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SqlDataSource dbSrc= new SqlDataSource();
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString2"].ConnectionString;
dbSrc.SelectCommand = "SELECT CustomerID, Name, Address FROM Customer";
GridView1.DataSource = dbSrc;
GridView1.DataBind();
}
}
//The code to populate the nested GridView that is called on the main GridView's OnRowDataBound event
protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{

GridView gv = (GridView)e.Row.FindControl("GridView2");
SqlDataSource dbSrc = new SqlDataSource();
dbSrc.ConnectionString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString2"].ConnectionString;
dbSrc.SelectCommand = "SELECT OrderDate,ShippedDate, ShipTO FROM Orders where customerID='" + ((DataRowView)e.Row.DataItem)["CustomerID"].ToString() + "'";
gv.DataSource = dbSrc;
gv.DataBind();
}
}