jquery datables - ASP.NET checkbox is firing more than once

Question

I have a CompositeDataBoundControl which has a CheckBox in one of the column. The CheckBox is set to AutoPostBack=True with OnCheckboxChanged handler. Now upon checkbox change I update my database value to true/false accordingly. This all works fine.

Now I added jquery datatables.net plugin with paging with displaying 10 records at a time. When I update checkboxes on first page it all works fine. Then if I move to second page and select a checkbox, it updates that record but then it start firing OnCheckBoxChanged handler for the times I changed checkboxes on page1. And for all those times, it resets those checkboxes.

-> There are no other explicit handler declaration anywhere in code-behind and this is C# so no Handles clauses issue. -> Someone talking here that it could be databinding but then the issue is only when using datatables. So not sure if it's that but I am looking into it.

Edit Check the sample here.

Steps to reproduce the issue: 1) Select couple checkboxes while on page1. The checkboxes will postback and update the message.

2) Now go to page2 and select a checkbox. The chbx will postback and grid will move to page1. Notice the chbx you selected in page1 lost the selection. If you move to page2, you will see the selection made persists.

Edit Seems this is the issue. Now finding little difficult to implement that. Need help on that.

I am not sure what's going on. Anyone had similar issue?

We are using jquery Datatables too but in MVC and so far we don't encounter this issue. It might be you have problem with postback on ASP.NET WebForms — Jobert Enamno, Mar 05 '13 at 05:21
@Jobert...It's actually the datatables I think. It doesn't postback the hidden rows as mentioned here: http://stackoverflow.com/questions/6020574/pagination-with-selected-check-boxes-checkboxes-will-only-work-on-current-pagin — gbs, Mar 05 '13 at 05:27

score 0 · Accepted Answer · edited May 23 '17 at 11:49

The issue was datatables not posting back the hidden rows. So I need to add them back to my table as discussed in the following link: http://datatables.net/forums/discussion/3099/x&page=1

Although when using with ASP.NET ScriptManager/UpdatePanel I had to add them back even before the beginRequest as mentioned here:

How do I disable or remove unnecessary form elements before an ASP.NET asynchronous postback?

I will add some code, once I implement it in my sample project. This is the code I implemented:

//code-behind Page_Load
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "beforePostback", "beforePostback()");

// JS code
var table;
$(function(){
    table = $(".mygrid").dataTable();
});

function beforePostback() {
    //table is the object that holds the dataTable 
    if(table!='undefined' && $(".mygrid thead").length>0){
         hiddenRows = table.fnGetHiddenNodes();
                $('table.mygrid tbody').append(hiddenRows);
     }
}

jquery datables - ASP.NET checkbox is firing more than once

1 Answers1