Row click and checkbox click event not working

Honeydew

I am doing server side processing for showing the data and it is working fine except that my row click event and checkbox click event is not working. Here is the code:

    function BuildDatatable() {
        $.ajax({
           url: "Handlers/DatatableHandler.ashx",
           data: { Operation: 'ColumnNames' },
            success: function (data) {                  
                result = JSON.parse(data);                   
                //console.log(result);
                $('#tblEmployeeList').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,                                         
                    ajax: {
                        "url": "Handlers/DatatableHandler.ashx",
                        "data": { Operation: 'EmployeeList' },
                        "type": "POST",
                        "datatype": "json"                            
                    },
                    columns: result,
                    columnDefs: [
                        {
                            targets: 0,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                            },
                            className: "dt-body-center",
                            orderable: false,
                            searchable: false
                        },
                        {
                            targets: 1,
                            visible: false
                        }                          
                    ]

                });
            }
        });
    }


    $('input.editor-active').on('change', function () {
        alert('checkbox clicked'); // it is never shown
        cb = $(this).prop('checked');
        console.log(cb)
    });


    $('#tblEmployeeList').on('click', 'tbody td:not(:first-child)', function () {
        alert('in'); // it is never shown
        var table = $('#example').DataTable();
        var row = table.row(this.closest('tr')).data();
        alert("EmployeeId: " + row[1]);   //EmployeeId
    });

Can you please suggest what part of code is not correct and how can I make it functioning?

Also is there a simple way to add a checkbox once the columns are fetched dynamically from the server i.e. i tried these statements: {
orderable: false,
className: 'select-checkbox',
targets: 0
}
but it does not render the checkbox. So what is the best approach to have a checkbox as a first column?

kthorngren

The input.editor-active elements are not on the page when the change event code is executed. You need to use jQuery Delegated Events. See the My events don't work on the second page FAQ.

Something like this should work:
$('#tblEmployeeList').on('change', 'tbody input.editor-active', function () {

i tried these statements: {
orderable: false,
className: 'select-checkbox',
targets: 0
}
but it does not render the checkbox.

This code snippet is used when you are using the Select Extension. You will need to include the Select code and follow this example:
https://datatables.net/extensions/select/examples/initialisation/checkbox.html

Kevin

Honeydew

This line $('#tblEmployeeList').on('change', 'tbody input.editor-active', function () {
still does not work.

kthorngren

The updated code works in this example:
http://live.datatables.net/huyexejo/10/edit

I copied your checkbox column and change event code into the example. Wonder if your page is cached.

Kevin

Honeydew

Still not able to make it work.. is it because I have serverSide: true?

Honeydew

Sorry my mistake I forgot to write this code in $(document).ready(function().
Thanks a lot for all the patience, appreciate it.

Honeydew

Similarly I have moved the row click event to document.ready function and it does shows the first alert but does not return the value of EmployeeId

$('#tblEmployeeList').on('click', 'tbody td:not(:first-child)', function () {
alert('in');
var row = this.closest('tr');
alert(row[1]); // this returns undefined
});

I even tried declaring the table variable like this
var table = $('#tblEmployeeList').DataTable();
var row = table.row(this.closest('tr')).data();
alert(row[1]); // this returns undefined

Any idea why it works if serverSide is false but not when serverSide is true?

kthorngren

are you saying that turning off serverSide on this particular table you can access the data using row[1] but if severSide is on then you get undefined?

var row = this.closest('tr');

This returns the row HTML. You can see this with 'console.log(row)`. Its not a Datatables API.

var row = table.row(this.closest('tr')).data();

This does return a Datatables API.

alert(row[1]); // this returns undefined

This leads me to believe you are using objects not arrays for the data. Guessing you columns contains columns.data. If so then you need to access the row data using the object property. Maybe something like this alert(row.EmployeeId;.

Kevin

Honeydew

This is how I am returning the JSON from my handler code

private void GetColumnNames(HttpRequest request, HttpResponse response)
{
    List<DatatableInboxColumnNames> columnNames = new List<DatatableInboxColumnNames>();
    columnNames.Add(new DatatableInboxColumnNames { data = "Select", title = "" });
    columnNames.Add(new DatatableInboxColumnNames { data = "EmployeeId", title = "EmployeeId" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Name", title = "Name" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Title", title = "Title" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Joining", title = "Joining" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Viewed", title = "Viewed" });

    string output = new JavaScriptSerializer().Serialize(columnNames);
    response.Write(output);
}

kthorngren

Did you try this?

var row = table.row(this.closest('tr')).data();
alert(row.EmployeeId); // this returns undefined

Kevin