Select (Check) Child (Nested) ASP.Net GridView RadioButtonList based on parent using jQuery

swathiye...

SOLVED CLOSED ACTIVE ANSWERED
User: swathiyemp
Posted: on Mar 18, 2019 11:46 PM
Forum: Data Controls
Answer: 1
Views: 4828
Sample Code: Download

Using

I have 2 GridViews nested one in another with radio button list controls. The first and second Grid view's Radio Button list have same buttons like Yes, No, N/A. When the parents "No" List item is clicked it should show the nested grid view and its associated radio buttons and let the user click on it. But when the No and N/A radiobuttons are clicked, the childs yes and N/A should get autoclicked and when the user deselects it should deselect parents yes and N/A.

When I hit the submit button, it should only take the child's radiobutton values and save it in database.

The code is below. Any help is appreciated.

$(function () {
$('[id*=QuestList]').click(function () {
var text = $(this).val();
if (text == "Yes") {
$(this).closest('table').parent().find('div').hide();
$(this).attr('checked', true);
}
else if (text == "No") {
$(this).closest('table').parent().find('div').toggle();
}
else if (text == "N/A") {
$(this).closest('table').parent().find('div').hide();
}
});
});

$(document).on('change', '[id*=QuestList]', function () {
$('[StandList="' + $(this).attr('QuestList') + '"]:first').prop('checked', true);
});
$(document).on('change', '[id*=QuestList]', function () {
$('[StandList="' + $(this).attr('QuestList') + '"]').prop('checked', true);
});

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



Protected Sub OnRowDataBound(sender As Object, 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 * from Standards where Questions= '{0}'", questid))
GridView2.DataBind()
End If
End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim strConnString As String = ConfigurationManager.ConnectionStrings("ConnectionString2").ConnectionString
Dim strSQL As String = String.Empty
Dim cn As SqlConnection = New SqlConnection(strConnString)
cn.Open()

Dim strResponse As String = String.Empty
For Each row As GridViewRow In GridView1.Rows
Dim btn1 As RadioButtonList = CType(GridView1.Rows(row.RowIndex).FindControl("QuestList"), RadioButtonList)
Dim gview As GridView = CType(GridView1.Rows(row.RowIndex).FindControl("GridView2"), GridView)
Dim btn2 As RadioButtonList = CType(gview.Rows(row.RowIndex).FindControl("StandList"), RadioButtonList)

If btn1.SelectedItem.Text = "Yes" Then
btn2.SelectedValue = "Yes"
ElseIf btn1.SelectedItem.Text = "N/A" Then
btn2.SelectedValue = "N/A"
End If
If btn2.SelectedValue = "Yes" Then
strResponse = "Yes"
ElseIf btn2.SelectedValue = "No" Then
strResponse = "No"
ElseIf btn2.SelectedValue = "N/A" Then
strResponse = "N/A"
End If
Next

strSQL = "Update Results set Response = '" & strResponse & "' where Standard = '"
Dim cmd As SqlCommand = New SqlCommand(strSQL, cn)
cmd.ExecuteNonQuery()
cn.Close()
End Sub

pandeyis...

0 3

Reply
ANSWER
User: pandeyism
Replied: on Mar 19, 2019 06:08 AM
Modified: on Mar 19, 2019 11:43 PM
Report

Hi swathiyemp,

Refer below sample.

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').show();
                var radio = $(this).closest('table').parent().find("TR").find("INPUT");
                for (var i = 0; i < radio.length; i++) {
                    if ($(this).closest('table').parent().find("TR").find("INPUT")[i].value == "No") {
                        $(this).closest('table').parent().find("TR").find("INPUT")[i].checked = true;
                    }
                }
            }
            else if (text == "Yes") {
                $(this).closest('table').parent().find('div').hide();
                var radio = $(this).closest('table').parent().find("TR").find("INPUT");
                for (var i = 0; i < radio.length; i++) {
                    if ($(this).closest('table').parent().find("TR").find("INPUT")[i].value == "Yes") {
                        $(this).closest('table').parent().find("TR").find("INPUT")[i].checked = true;
                    }
                }
            }
            else if (text == "N/A") {
                $(this).closest('table').parent().find('div').show();
                var radio = $(this).closest('table').parent().find("TR").find("INPUT");
                for (var i = 0; i < radio.length; i++) {
                    if ($(this).closest('table').parent().find("TR").find("INPUT")[i].value == "N/A") {
                        $(this).closest('table').parent().find("TR").find("INPUT")[i].checked = true;
                    }
                }
            }
        });
    });
</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>
<br />
<asp:Button Text="Insert" runat="server" OnClick="Insert" />

Namespaces

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

VB.Net

Imports System.Data.SqlClient
Imports System.Data

Code

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 1 * from Orders where CustomerId='{0}'", questid));
        GridView2.DataBind();
    }
}

protected void Insert(object sender, EventArgs e)
{
    string message = "";
    foreach (GridViewRow row in GridView1.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {
            GridView GridView2 = row.FindControl("GridView2") as GridView;
            foreach (GridViewRow row1 in GridView2.Rows)
            {
                if (row1.RowType == DataControlRowType.DataRow)
                {
                    RadioButtonList rbl = row1.FindControl("StandList") as RadioButtonList;
                    if (rbl.SelectedIndex != -1)
                    {
                        message += rbl.SelectedValue + " " + row1.Cells[0].Text;
                    }
                }
            }
        }
    }
    ScriptManager.RegisterStartupScript(this, this.GetType(), "CropImage", "alert('" + message + "');", true);
}

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 1 * from Orders where CustomerId='{0}'", questid))
        GridView2.DataBind()
    End If
End Sub

Protected Sub Insert(ByVal sender As Object, ByVal e As EventArgs)
    Dim message As String = ""
    For Each row As GridViewRow In GridView1.Rows
        If row.RowType = DataControlRowType.DataRow Then
            Dim GridView2 As GridView = TryCast(row.FindControl("GridView2"), GridView)
            For Each row1 As GridViewRow In GridView2.Rows
                If row1.RowType = DataControlRowType.DataRow Then
                    Dim rbl As RadioButtonList = TryCast(row1.FindControl("StandList"), RadioButtonList)
                    If rbl.SelectedIndex <> -1 Then
                        message += rbl.SelectedValue & " " + row1.Cells(0).Text
                    End If
                End If
            Next
        End If
    Next
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "CropImage", "alert('" & message & "');", True)
End Sub

Screenshot

Select (Check) Child (Nested) ASP.Net GridView RadioButtonList based on parent using jQuery

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

Company

Explore

Follow us

Contact Us