Show Hide Child (Nested) GridView based on RadioButtonList selection in Parent ASP.Net GridView using jQuery

Hi swathiyemp,

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=QuestList]').click(function () {
            var text = $(this).val();
            if (text == "No") {
                $(this).closest('table').parent().find('div').hide();
            }
            else if (text == "Yes") {
                $(this).closest('table').parent().find('div').show();
            }
            else if (text == "N/A") {
                $(this).closest('table').parent().find('div').show();
            }
        });
    });
</script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None"
    CssClass="Grid" DataKeyNames="CustomerId" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="ContactName" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:RadioButtonList ID="QuestList" runat="server" DataValueField="Question" RepeatDirection="Horizontal">
                    <asp:ListItem Enabled="False" Style="display: none" Text="" Value="0"></asp:ListItem>
                    <asp:ListItem Value="Yes">Yes</asp:ListItem>
                    <asp:ListItem Value="No">No</asp:ListItem>
                    <asp:ListItem Value="N/A">N/A</asp:ListItem>
                </asp:RadioButtonList>
                <br></br>
                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid"
                    GridLines="None">
                    <Columns>
                        <asp:BoundField DataField="OrderId" HeaderText="OrderId" />
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:RadioButtonList ID="StandList" runat="server" DataValueField="Description" RepeatDirection="Horizontal">
                                    <asp:ListItem Enabled="False" Style="display: none" Text="" Value="0"></asp:ListItem>
                                    <asp:ListItem Value="Yes">Yes</asp:ListItem>
                                    <asp:ListItem Value="No" Selected="False">No</asp:ListItem>
                                    <asp:ListItem Value="N/A">N/A</asp:ListItem>
                                </asp:RadioButtonList>
                                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <br></br>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Namespaces

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)
    {
        GridView1.DataSource = GetData("select top 2 * from Customers");
        GridView1.DataBind();
    }
}

private static DataTable GetData(string query)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        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 OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string questid = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
        GridView GridView2 = e.Row.FindControl("GridView2") as GridView;
        GridView2.DataSource = GetData(string.Format("select top 3 * from Orders where CustomerId='{0}'", questid));
        GridView2.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        GridView1.DataSource = GetData("select top 2 * from Customers")
        GridView1.DataBind()
    End If
End Sub

Private Shared Function GetData(ByVal query As String) As DataTable
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(strConnString)
        Using cmd As SqlCommand = New SqlCommand()
            cmd.CommandText = query
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using ds As DataSet = New DataSet()
                    Dim dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    Return dt
                End Using
            End Using
        End Using
    End Using
End Function

Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim questid As String = GridView1.DataKeys(e.Row.RowIndex).Value.ToString()
        Dim GridView2 As GridView = TryCast(e.Row.FindControl("GridView2"), GridView)
        GridView2.DataSource = GetData(String.Format("select top 3 * from Orders where CustomerId='{0}'", questid))
        GridView2.DataBind()
    End If
End Sub

Screenshot