Ruruboy Ruruboy - 3 months ago 58
ASP.NET (C#) Question

Set Hidden field to some value when check boxes are selected GridView using jquery in a ASP.NET web forms application

From a ASP.NET web forms application ASP.NET page using .NET framework 2.0 using Jquery version 1.8.2 using an ASP.NET GridView control.

I need to be able to set the hiddenfield : hidIsDirty to a value "true" when I click on either of the 3 checkboxes Auto-Cheque, Auto-EFT or Manual. Please tell me how I can achive this with JQuery, as I wrote the following code below in jquery which does not set the value of the hidden field. I will be accessing the hidden field in code behind (aspx.cs).

Can you help refactor my jquery code and help me achieve the requirement for the 3 check boxes?

Code is given below:

<script>
$("[id*=rdoSAPPaymentAuto]").live("click", function () {
var parentRow = $(this).parent('tr');
var hiddenField=parentRow.find('input[id$=hidIsDirty]');
alert(hiddenField.val("true"));
});

$("#<%=gvPaymentList.ClientID %> input[id*='rdoSAPPaymentAuto']").click(function () {
var parentRow = $(this).parent('tr');
var hiddenField=parentRow.find('input[id$=hidIsDirty]');
alert(hiddenField.val("true"));
});

$("#<%=gvPaymentList.ClientID %> input[id*='rdoSAPPaymentAutoEFT']").click(function () {
var parentRow = $(this).parent('tr');
var hiddenField=parentRow.find('input[id$=hidIsDirty]');
alert(hiddenField.val("true"));
});

$("#<%=gvPaymentList.ClientID %> input[id*='rdoSAPPaymentManual']").click(function () {
var parentRow = $(this).parent('tr');
var hiddenField=parentRow.find('input[id$=hidIsDirty]');
alert(hiddenField.val("true"));
});

</script>

WebForm.aspx page:

<asp:GridView ID="gvPaymentList" runat="server" CellPadding="0" EmptyDataText="No payments found."
CssClass="green greenBorder setpadding" AutoGenerateColumns="false" OnRowDataBound="gvPaymentList_RowDataBound"
AllowSorting="true" AlternatingRowStyle-CssClass="altRowColor" RowStyle-CssClass="RowColor"
OnSorting="gvPaymentList_Sorting" ShowFooter="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Approve for SAP Auto Payment or Manual Pay Req
<input id="btnAutoPayment" value="Set All to Auto Payment" type="button" />
</HeaderTemplate>
<ItemTemplate>
<asp:CustomValidator ID="cvAutoPayCheck3" runat="server" OnServerValidate="cvAutoPayCheck_ServerValidate">*</asp:CustomValidator>
<asp:RadioButton ID="rdoSAPPaymentAuto" GroupName="SAPPaymentOption" runat="server"
AutoPostBack="true" OnCheckedChanged="rdoSAPPaymentAuto_CheckedChanged" Text="Auto-Cheque" />
<asp:RadioButton ID="rdoSAPPaymentAutoEFT" GroupName="SAPPaymentOption" OnCheckedChanged="rdoSAPPaymentAutoEFT_CheckedChanged" runat="server"
AutoPostBack="true" Text="Auto-EFT" />
<asp:RadioButton ID="rdoSAPPaymentManual" GroupName="SAPPaymentOption" runat="server"
AutoPostBack="true" OnCheckedChanged="rdoSAPPaymentManual_CheckedChanged" Text="Manual" />
<asp:RadioButton ID="rdoSAPPaymentPending" GroupName="SAPPaymentOption" runat="server"
Text="Pending" />
<asp:HiddenField ID="hidSAPPayment" runat="server" />
<asp:HiddenField ID="hidIsDirty" runat="server" />
</ItemTemplate>
<ItemStyle Width="310px" />
</asp:TemplateField>
</Columns>
</asp:GridView>

Answer

Here is the working solution Put CssClass for your radiobuttons like:

<asp:RadioButton ID="rdoSAPPaymentAuto" GroupName="SAPPaymentOption" runat="server"
                                    Text="Auto-Cheque" CssClass="rdo" />
                                <asp:RadioButton ID="rdoSAPPaymentAutoEFT" GroupName="SAPPaymentOption"  runat="server"
                                    Text="Auto-EFT" CssClass="rdo" />
                                <asp:RadioButton ID="rdoSAPPaymentManual" GroupName="SAPPaymentOption" runat="server" 
                                      Text="Manual" CssClass="rdo" /> 

Below small Jscript will do the trick

$('.rdo').click(function () {                                      
                var parentRow = $(this).closest('tr');
                alert($(parentRow).html());                    
                var hiddenField = $(parentRow).find('input[type="hidden"]:first');                                       
                alert($(hiddenField).val('true'));
            })

Note: Please change the order of hidden field (as i am getting first hidden field)...bit lazy but you can find hidden fields by Id like...

 <asp:HiddenField ID="hidIsDirty" runat="server" />
 <asp:HiddenField ID="hidSAPPayment" runat="server" />

Hope this helps!

Comments