[RESOLVED]How to check the element of a control which is inside a grid using javascript

Hi guys,

I have a grid in which  in which first cell is check box 2nd is drop down 3 rd  cell have radio button  and 4th cell have label

Now condition is that if fisrt check box than check if  radio box is checked then value of selected item from drop down should get appended with 

the label which is in 4th cell.

How to do it 

You can try with the below implemenation

HTML:

<asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowSorting="True"
                    DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_OnRowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox2_CheckedChanged" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
                                    DataTextField="AddressLine1" DataValueField="AddressLine1">
                                </asp:DropDownList>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:RadioButton ID="RadioButton1" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks2008R2ConnectionString %>"
                    SelectCommand="SELECT top 20  [AddressID], [AddressLine1] FROM Person.Address">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>

C#:

/// <summary>
        /// Handles the CheckedChanged event of the CheckBox2 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="EventArgs"/> instance containing the event data.</param>
        protected void CheckBox2_CheckedChanged(object sender, EventArgs e)
        {
            //Get the checkbox from sender object
            CheckBox chk = sender as CheckBox;
            //Get the selected row from checkbox container
            GridViewRow row = (GridViewRow)chk.NamingContainer;
            //Get the dropdownlist control from selected GridViewrow
            DropDownList drpdwctrl = row.FindControl("DropDownList1") as DropDownList;
            //Get the Radiobutton control from selected GridViewrow
            RadioButton rdpbtnctrl = row.FindControl("RadioButton1") as RadioButton;
            //Get the label control from selected GridViewrow
            Label lblctrl = row.FindControl("Label3") as Label;
            //Check if checkbox is checked or not
            if (chk.Checked)
            {
                //Check if Radiobutton control is checked or not
                if (rdpbtnctrl.Checked)
                {
                    //Assign the value to existing text in label control
                    lblctrl.Text = lblctrl.Text + " " + drpdwctrl.SelectedItem.Text;
                }
            }

        }

Change the ids of control as per your gridview

Rendered Output

EDIT:Added Rendred output demo

Hi kaushiklotus,

Thanks for your post.

Based on your requirement, I create a sample for you, you could refer to it and make some changes according to your specific requirements.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $(":checkbox").change(function () {
                var ischecked = $(this).is(":checked");
                var rd = $(this).parent().siblings().find(":radio").is(":checked");

                if (ischecked && rd) {
                    var mes = $(this).parent().siblings().find("select").find("option:selected").val();
                    //alert(mes);
                    $(this).parent().siblings().find("span").html(mes);
                }
            });

            $(":radio").change(function () {
                var ischecked = $(this).is(":checked");
                var rd = $(this).parent().siblings().find(":checkbox").is(":checked");

                if (ischecked && rd) {
                    var mes = $(this).parent().siblings().find("select").find("option:selected").val();
                    //alert(mes);
                    $(this).parent().siblings().find("span").html(mes);
                }
            });

            $("select").change(function () {
                var mes = $(this).find("option:selected").val();
                var ischecked = $(this).parent().siblings().find(":checkbox").is(":checked");
                var rd = $(this).parent().siblings().find(":radio").is(":checked");

                if (ischecked && rd) {
                    $(this).parent().siblings().find("span").html(mes);
                }
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox1" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
                                DataTextField="Name" DataValueField="Name">
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:RadioButton ID="RadioButton1" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [ChartInfo]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html> 

In above sample code, I use some selectors and events, if you’d like to learn about these, you could check the following links.

If you have any question about my reply, please let me know freely.

Best Regards,

Fei Han

Thank you 

Hi kaushiklotus.

Have you tried my sample? your requirement is that checking the elements inside a gridview using javascript, does my sample not meet your requirement?

Best Regards,

Fei Han

Leave a Reply