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