Hi baswal07,
I am referring following article.
And I have modified the code as per your requirement.
I made changes in ImageButton OnClick (Show_Hide_OrdersGrid) event handler.
I used FOR EACH loop which executed over all the GridView rows to hide all the GridView if LinkButton is clicked to open another GridView.
Show_Hide_OrdersGrid
protected void Show_Hide_OrdersGrid(object sender, EventArgs e)
{
ImageButton imgShowHide = (sender as ImageButton);
GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
foreach (GridViewRow rowAll in gvCustomers.Rows)
{
ImageButton imgBtnAll = rowAll.FindControl("imgOrdersShow") as ImageButton;
if (imgShowHide.CommandArgument == "Show")
{
//Hidding all the GridView if LinkButton Is clicked to open GridView.
rowAll.FindControl("pnlOrders").Visible = false;
imgBtnAll.ImageUrl = "~/images/plus.png";
imgBtnAll.CommandArgument = "Show";
}
}
if (imgShowHide.CommandArgument == "Show")
{
row.FindControl("pnlOrders").Visible = true;
imgShowHide.CommandArgument = "Hide";
imgShowHide.ImageUrl = "~/images/minus.png";
string customerId = gvCustomers.DataKeys[row.RowIndex].Value.ToString();
GridView gvOrders = row.FindControl("gvOrders") as GridView;
this.BindOrders(customerId, gvOrders);
}
else
{
row.FindControl("pnlOrders").Visible = false;
imgShowHide.CommandArgument = "Show";
imgShowHide.ImageUrl = "~/images/plus.png";
}
}
Here is the complete working sample. You can also download sample zip.
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
Download and install Northwind Database
HTML
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="CustomerID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgOrdersShow" runat="server" OnClick="Show_Hide_OrdersGrid"
ImageUrl="~/images/plus.png" CommandArgument="Show" />
<asp:Panel ID="pnlOrders" runat="server" Visible="false" Style="position: relative">
<asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" PageSize="5"
AllowPaging="true" OnPageIndexChanging="OnOrdersGrid_PageIndexChanging" CssClass="ChildGrid"
DataKeyNames="OrderId">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgProductsShow" runat="server" OnClick="Show_Hide_ProductsGrid"
ImageUrl="~/images/plus.png" CommandArgument="Show" />
<asp:Panel ID="pnlProducts" runat="server" Visible="false" Style="position: relative">
<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="false" PageSize="2"
AllowPaging="true" OnPageIndexChanging="OnProductsGrid_PageIndexChanging" CssClass="Nested_ChildGrid">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="ProductId" HeaderText="Product Id" />
<asp:BoundField ItemStyle-Width="150px" DataField="ProductName" HeaderText="Product Name" />
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Order Id" />
<asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
</Columns>
</asp:GridView>
Namespaces
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
gvCustomers.DataSource = this.GetData("SELECT TOP 10 * FROM Customers");
gvCustomers.DataBind();
}
}
private DataTable GetData(string query)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = query;
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
}
protected void Show_Hide_OrdersGrid(object sender, EventArgs e)
{
ImageButton imgShowHide = (sender as ImageButton);
GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
foreach (GridViewRow rowAll in gvCustomers.Rows)
{
ImageButton imgBtnAll = rowAll.FindControl("imgOrdersShow") as ImageButton;
if (imgShowHide.CommandArgument == "Show")
{
//Hidding all the GridView if LinkButton is clicked to open GridView.
rowAll.FindControl("pnlOrders").Visible = false;
imgBtnAll.ImageUrl = "~/images/plus.png";
imgBtnAll.CommandArgument = "Show";
}
}
if (imgShowHide.CommandArgument == "Show")
{
row.FindControl("pnlOrders").Visible = true;
imgShowHide.CommandArgument = "Hide";
imgShowHide.ImageUrl = "~/images/minus.png";
string customerId = gvCustomers.DataKeys[row.RowIndex].Value.ToString();
GridView gvOrders = row.FindControl("gvOrders") as GridView;
this.BindOrders(customerId, gvOrders);
}
else
{
row.FindControl("pnlOrders").Visible = false;
imgShowHide.CommandArgument = "Show";
imgShowHide.ImageUrl = "~/images/plus.png";
}
}
private void BindOrders(string customerId, GridView gvOrders)
{
gvOrders.ToolTip = customerId;
gvOrders.DataSource = this.GetData(string.Format("SELECT * FROM Orders WHERE CustomerId='{0}'", customerId));
gvOrders.DataBind();
}
protected void OnOrdersGrid_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView gvOrders = (sender as GridView);
gvOrders.PageIndex = e.NewPageIndex;
this.BindOrders(gvOrders.ToolTip, gvOrders);
}
protected void Show_Hide_ProductsGrid(object sender, EventArgs e)
{
ImageButton imgShowHide = (sender as ImageButton);
GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
if (imgShowHide.CommandArgument == "Show")
{
row.FindControl("pnlProducts").Visible = true;
imgShowHide.CommandArgument = "Hide";
imgShowHide.ImageUrl = "~/images/minus.png";
int orderId = Convert.ToInt32((row.NamingContainer as GridView).DataKeys[row.RowIndex].Value);
GridView gvProducts = row.FindControl("gvProducts") as GridView;
this.BindProducts(orderId, gvProducts);
}
else
{
row.FindControl("pnlProducts").Visible = false;
imgShowHide.CommandArgument = "Show";
imgShowHide.ImageUrl = "~/images/plus.png";
}
}
private void BindProducts(int orderId, GridView gvProducts)
{
gvProducts.ToolTip = orderId.ToString();
gvProducts.DataSource = this.GetData(string.Format("SELECT ProductId, ProductName FROM Products WHERE ProductId IN (SELECT ProductId FROM [Order Details] WHERE OrderId = '{0}')", orderId));
gvProducts.DataBind();
}
protected void OnProductsGrid_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView gvProducts = (sender as GridView);
gvProducts.PageIndex = e.NewPageIndex;
this.BindProducts(int.Parse(gvProducts.ToolTip), gvProducts);
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
gvCustomers.DataSource = Me.GetData("SELECT TOP 10 * FROM Customers")
gvCustomers.DataBind()
End If
End Sub
Private Function GetData(query As String) As DataTable
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand()
cmd.CommandText = query
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As New DataSet()
Dim dt As New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Using
End Function
Protected Sub Show_Hide_OrdersGrid(ByVal sender As Object, ByVal e As EventArgs)
Dim imgShowHide As ImageButton = (TryCast(sender, ImageButton))
Dim row As GridViewRow = (TryCast(imgShowHide.NamingContainer, GridViewRow))
For Each rowAll As GridViewRow In gvCustomers.Rows
Dim imgBtnAll As ImageButton = TryCast(rowAll.FindControl("imgOrdersShow"), ImageButton)
If imgShowHide.CommandArgument = "Show" Then
'Hidding all the GridView if LinkButton Is clicked to open GridView.
rowAll.FindControl("pnlOrders").Visible = False
imgBtnAll.ImageUrl = "~/images/plus.png"
imgBtnAll.CommandArgument = "Show"
End If
Next
If imgShowHide.CommandArgument = "Show" Then
row.FindControl("pnlOrders").Visible = True
imgShowHide.CommandArgument = "Hide"
imgShowHide.ImageUrl = "~/images/minus.png"
Dim customerId As String = gvCustomers.DataKeys(row.RowIndex).Value.ToString()
Dim gvOrders As GridView = TryCast(row.FindControl("gvOrders"), GridView)
Me.BindOrders(customerId, gvOrders)
Else
row.FindControl("pnlOrders").Visible = False
imgShowHide.CommandArgument = "Show"
imgShowHide.ImageUrl = "~/images/plus.png"
End If
End Sub
Private Sub BindOrders(customerId As String, gvOrders As GridView)
gvOrders.ToolTip = customerId
gvOrders.DataSource = Me.GetData(String.Format("SELECT * FROM Orders WHERE CustomerId='{0}'", customerId))
gvOrders.DataBind()
End Sub
Protected Sub OnOrdersGrid_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
Dim gvOrders As GridView = TryCast(sender, GridView)
gvOrders.PageIndex = e.NewPageIndex
Me.BindOrders(gvOrders.ToolTip, gvOrders)
End Sub
Protected Sub Show_Hide_ProductsGrid(sender As Object, e As EventArgs)
Dim imgShowHide As ImageButton = TryCast(sender, ImageButton)
Dim row As GridViewRow = TryCast(imgShowHide.NamingContainer, GridViewRow)
If imgShowHide.CommandArgument = "Show" Then
row.FindControl("pnlProducts").Visible = True
imgShowHide.CommandArgument = "Hide"
imgShowHide.ImageUrl = "~/images/minus.png"
Dim orderId As Integer = Convert.ToInt32(TryCast(row.NamingContainer, GridView).DataKeys(row.RowIndex).Value)
Dim gvProducts As GridView = TryCast(row.FindControl("gvProducts"), GridView)
Me.BindProducts(orderId, gvProducts)
Else
row.FindControl("pnlProducts").Visible = False
imgShowHide.CommandArgument = "Show"
imgShowHide.ImageUrl = "~/images/plus.png"
End If
End Sub
Private Sub BindProducts(orderId As Integer, gvProducts As GridView)
gvProducts.ToolTip = orderId.ToString()
gvProducts.DataSource = Me.GetData(String.Format("SELECT ProductId, ProductName FROM Products WHERE ProductId IN (SELECT ProductId FROM [Order Details] WHERE OrderId = '{0}')", orderId))
gvProducts.DataBind()
End Sub
Protected Sub OnProductsGrid_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
Dim gvProducts As GridView = TryCast(sender, GridView)
gvProducts.PageIndex = e.NewPageIndex
Me.BindProducts(Integer.Parse(gvProducts.ToolTip), gvProducts)
End Sub
Screenshot
