Editor with two checkbox

Editor with two checkbox

santosh.sahoo@devoteam.comsantosh.sahoo@devoteam.com Posts: 9Questions: 4Answers: 0
edited April 2021 in Editor

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?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

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

    Allan

  • santosh.sahoo@devoteam.comsantosh.sahoo@devoteam.com Posts: 9Questions: 4Answers: 0

    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) });

This discussion has been closed.