Fire onCheckChanged event of CheckBox from jQuery aspnet

Question

I have a CheckBox field in a GridView in an aspnet webform. Upon user checking / unchecking each checkbox, I want to run server side code for OnCheckedChanged event for that checkbox using jQuery.

The GridView loads in a jQuery popup window like this

<div id="dialog" style="display: none">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnPageIndexChanging="OnPageIndexChanging" DataKeyNames="ID"
        PageSize="10" AllowPaging="true">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:checkbox id="chk" runat="server" Text="Select" OnCheckedChanged="OnCheckChanged" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="100" />
            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="300" />
            <asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-Width="400" />
        </Columns>
    </asp:GridView>
</div>

jQuery is like this

$(document).ready(function () {
    $("input:checkbox").click(function () {
        if ($(this).is(":checked")) {
            $(this).trigger('OnCheckChanged',true);            
        } else {
            alert("false");
        }
    });
});

My "CheckChanged" Event is like this

Sub OnCheckChanged(sender As Object, e As EventArgs)
Dim chk As CheckBox = TryCast(sender, CheckBox)
Dim row As GridViewRow = TryCast(chk.NamingContainer, GridViewRow)
Dim pk As String = GridView1.DataKeys(row.RowIndex).Values(0).ToString
If chk.Checked = True Then
      'Do something  
Else
      'Do something 
End If

End Sub

The jQuery function works when the CheckBox is unchecked. But it does not fire the server side OnCheckChanged event

Can anyone help?

score 0 · Answer 1 · edited Sep 13 '16 at 00:28

0

$(document).ready(function () {
   $("input[type=checkbox]" ).click(function () {
       if ($(this).is("input:checked")) {
           $(this).trigger('OnCheckChanged',true);            
       } else {
           alert("false");
       }
    });
});

edited Sep 13 '16 at 00:28

Laurel

5,965
14
31
57

answered Sep 12 '16 at 20:08

Dayo Greats

25
10

I tried this suggestion, but it still does not fire the server side code. – geoabram Sep 13 '16 at 02:01
The GridView loads in a jQuery popup window, as shown in the edit – geoabram Sep 13 '16 at 02:08
Thanks for the comments – geoabram Sep 15 '16 at 17:31

score 0 · Answer 2 · answered Sep 15 '16 at 17:39

Thanks for the suggestions. After reading up a loooot, I came to the conclusion that I am required to use .trigger('change'), and not ,trigger('OnCheckChanged'). Please correct me if I am wrong.

Also, I have to include AutoPostBack="true" for the checkbox field. If I don't set this to "true", the server side event "OnCheckChanged" is not attached the checkbox at the time of rendering.

Now the issue is, when I set the AutoPostBack="true", the modal popup window disappears, and does not reload.

Is there any way to (a) Attach the server side event to the control without setting AutoPostBack ="true"?

(b) Alternatively, can I reload the modal popup window after the postback, with the checkboxes in the same state as the user had selected?

Fire onCheckChanged event of CheckBox from jQuery aspnet

2 Answers2