Retain (Keep) Nested Child ASP.Net GridView expanded after PostBack using C# and VB.Net

Hi @comunidadmexicanaroma, Please try the following How to keep Nested Child GridViews Expanded across PostBack in ASP.Net It might help you. Cheers Andrea.

Hi comunidadmexi...,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:Button Text="Button" runat="server" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="CustomerID"
    OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt="" src="../pics/plus.png">
                <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                    <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="CustomerID"
                        AllowPaging="true" PageSize="5" CssClass="ChildGrid">
                        <Columns>
                            <asp:BoundField ItemStyle-Width="150px" DataField="OrderID" HeaderText="Order Id" />
                            <asp:BoundField ItemStyle-Width="200px" DataField="OrderDate" HeaderText="Date" />
                        </Columns>
                    </asp:GridView>
                    <asp:HiddenField ID="IsExpanded" runat="server" />
                </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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("[src*=plus]").live("click", function () {
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
        $(this).attr("src", "../pics/minus.png");
        $(this).closest('tr').find('[id*=IsExpanded]').val(1);
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "../pics/plus.png");
        $(this).closest("tr").next().remove();
        $(this).closest('tr').find('[id*=IsExpanded]').val("");
    });

    $(function () {
        $("[id*=IsExpanded]").each(function () {
            if ($(this).val() == "1") {
                $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $("[id*=pnlOrders]", $(this).closest("tr")).html() + "</td></tr>")
                $("[src*=plus]", $(this).closest("tr")).attr("src", "pics/minus.png");
            }
        });
    });
</script>

Namepsaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGridView();
    }

    //For Re Exapnding the expanded rows.
    foreach (GridViewRow row in GridView1.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {
            HiddenField IsExpanded = row.FindControl("IsExpanded") as HiddenField;
            if (Request.Form[IsExpanded.UniqueID] != null)
            {
                IsExpanded.Value = Request.Form[IsExpanded.UniqueID].Replace(",", "");
            }
        }
    }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string id = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
        GridView gv2 = ((GridView)e.Row.FindControl("GridView2"));
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
        SqlCommand cmd1 = new SqlCommand("select TOP 3 * from Orders where CustomerID='" + id + "'", con);
        SqlDataAdapter ada1 = new SqlDataAdapter();
        DataTable dt1 = new DataTable();
        ada1.SelectCommand = cmd1;
        ada1.Fill(dt1);
        gv2.DataSource = dt1;
        gv2.DataBind();
    }
}

private void BindGridView()
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
    SqlCommand cmd = new SqlCommand("select top 2 * from Customers", con); ;
    SqlDataAdapter ada = new SqlDataAdapter();
    DataTable dt = new DataTable();
    ada.SelectCommand = cmd;
    ada.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        BindGridView()
    End If

    For Each row As GridViewRow In GridView1.Rows
        If row.RowType = DataControlRowType.DataRow Then
            Dim IsExpanded As HiddenField = TryCast(row.FindControl("IsExpanded"), HiddenField)
            If Request.Form(IsExpanded.UniqueID) IsNot Nothing Then
                IsExpanded.Value = Request.Form(IsExpanded.UniqueID).Replace(",", "")
            End If
        End If
    Next
End Sub

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim id As String = GridView1.DataKeys(e.Row.RowIndex).Value.ToString()
        Dim gv2 As GridView = (CType(e.Row.FindControl("GridView2"), GridView))
        Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
        Dim cmd1 As SqlCommand = New SqlCommand("select TOP 3 * from Orders where CustomerID='" & id & "'", con)
        Dim ada1 As SqlDataAdapter = New SqlDataAdapter()
        Dim dt1 As DataTable = New DataTable()
        ada1.SelectCommand = cmd1
        ada1.Fill(dt1)
        gv2.DataSource = dt1
        gv2.DataBind()
    End If
End Sub

Private Sub BindGridView()
    Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
    Dim cmd As SqlCommand = New SqlCommand("select top 2 * from Customers", con)
    Dim ada As SqlDataAdapter = New SqlDataAdapter()
    Dim dt As DataTable = New DataTable()
    ada.SelectCommand = cmd
    ada.Fill(dt)
    GridView1.DataSource = dt
    GridView1.DataBind()
End Sub

Screenshot