Checkbox column - toggle is checked

Feraud

Hi,

I want to add a checkbox column to my table. When the user clicks on the checkbox, the checkbox will be checked. One more click unchecks the checkbox.

Problem: The toggling does not work. In the debugger, I can see that the checkbox gets checked, but somewhere it gets unchecked again.

How I do it:

In the columns definition I define the checkbox column:

            columns: [{
                    "title": "Watch",
                    "data": null,
                    "tooltip": "Aktie der Watchlist hinzufügen",
                    "render": function(data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="watchlist-checkbox">';
                        }
                        return data;
                    },
                    "className": "dt-body-center"
                },

In the "initComplete"-event of the table I register the click event:

             initComplete: function(settings, 
                // Register watchlist event for checkboxes
                var checkboxes = $("table#SecuritiesTable td input.watchlist-checkbox");
                for (var index = 0; index < checkboxes.length; index++) {
                    var checkbox = $(checkboxes[index]);
                    checkbox.prop("checked", true);

                    checkbox.click(function() {

                        var $this = $(this);
                        var isChecked = $this[0].checked;

                        $this[0].checked = !isChecked;
                    });
                }
            },

The table has selectable rows.

Any idea, where checking the checkbox is undone?

kthorngren

I've not seen the need to have a click event to toggle the checkbox when the user clicks it. In my experience the checkbox automatically follows what the user does. However there are a couple things that are needed:

1: In your render function you can set the state of the checkbox based on the data value. Assuming 1 or 0 for the checkbox value I do something like this:

render: function ( data, type, row ) {
     if ( type === 'display' ) {             //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
         return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
      }
     return data;
 },

2: If you want the data value (0 or 1) to follow the checkbox state then a click event is needed. I use something like this to get the checked value and change the data which in this case is an object:

 $('#example').on( 'click', 'tr', function () {
    var data = table.row(this).data();
    if (typeof data != 'undefined') {
      if ($(this).find('.filter-ck').prop('checked')) {  //update the cell data with the checkbox state
        data.check = 1;
      } else {
        data.check = 0;
      }
    }
  });

I'm sure there are other ways to do this and you may need to modify to fit your needs.

Kevin

Feraud

Hi Kevin,

_"I've not seen the need to have a click event to toggle the checkbox when the user clicks it."

I think, this is my problem. And I think, my selectable rows have something to do with it. Maybe the tr-element catches the mouse click and handles it exclusively?

kthorngren

This is a good example if you are using select and/or the Editor:
https://editor.datatables.net/examples/api/checkbox.html

It shows how to set the Datatables select to ignore certain columns like the chekcbox column. It also shows how to handle the checkbox state in the editor.

If this doesn't help maybe you can provide a test case example we can help with.

Kevin

Feraud

Hi Kevin,

your given sample requires the editor. I don't have the required license for this.

I will continue trying and post my findings later on.

Thanks for your help!

Torsten

kthorngren

I'm missing something in what you are trying to do. Here is a basic example of a checkbox working with select. Maybe you can update it with your issue.

http://live.datatables.net/dalozuni/2/edit

Kevin

Feraud

Kevin,

as it turned out, you were right. The checkbox gets selected and unselected all alone without any code. By commenting out that last line, everything works. I feel ashamed!

Thanks for your help!

        checkbox.click(function() {
 
            var $this = $(this);
            var isChecked = $this[0].checked;
 
            $this[0].checked = !isChecked;
        });

hemendraongraph

Put classname same as data name.

example: -
label: "",
name: "show_in_order",
type: "checkbox",
className: "show_in_order",
options: [
{ label: 'Show in order', value: 1 }
]
}