Editor with two checkbox

santosh.sahoo@devoteam.com

JSFiddle

Description of problem:
I am trying to have two checkbox in a datatable editor with the following requirements:
1. Only one of the checkbox should be checked at a time (Works)
2. When selecting a row, the PDF checkbox should be checked (Works)

I have added some script to addClass('selected'), when the checkbox are checked /unchecked and this selects the row.
But, when I click on any other td in the table, it seems to not work properly.

Try this

1. Step 1 (Works fine):
   Click on the row (Dont click the checkboxes)
   This gets the PDF checkbox selected and the row is also selected.

2. Step 2(works fine):
   Click the PDF checkbox and uncheck it.
   This results in the row getting deselected.

3. Step 3(Issue):
   This is where the problem happens.
   Try to click on the row (Dont click the checkboxes)
   This, gets the PDF checkbox selected(Which is fine), but the row is not selected.

What am I doing wrong?

allan

It looks like you are attempting to manipulate the selected class for the row yourself:

$(this).closest('tr').addClass('selected');

But that is something that the Select extension you are using will do for you. Rather than listening for the click event on the row, listen for the select event on the table - you can determine the row that was selected using:

table.on('select', function (e, dt, type, indexes) {
  table.row(indexes)
});

So for example you could toggle the PDF checkbox state with table.row(indexes).any() (which will give you a boolean answer).

Allan

allan

You may also wish to listen for the deselect depending on the logic you want.

Allan

santosh.sahoo@devoteam.com

Hello Allan,

Thanks for the help
Using your suggestion actually made it to work

Apart from using the select and deselect events,

table.on('select', function (e, dt, type, indexes) { table.row(indexes) });

I also had to replace the addClass from the onClick event of the checkboxes and replaced them with:
table.row().select() table.row().deselect()

table.on('select', function (e, dt, type, indexes) { table.row(indexes) });