row(index).deselect() or rows({ selected: true }).deselect(); not working

row(index).deselect() or rows({ selected: true }).deselect(); not working

toomanyloginstoomanylogins Posts: 34Questions: 11Answers: 0

I am using,

  • Included libraries:
  • DataTables 2.2.0, Editor 2.4.0, Buttons 3.2.0, Responsive 3.0.3, Select 3.0.0

The following code does not deselect the row but the check box is cleared.

For the table option I have

`            select: {
                style: 'os',
                selector: 'td:first-child'
            },`

On click of the check box

`        $('#invoiceTable tbody').on('click', '.selectPost', function (el) {
            //   var allData = invoiceTable.rows().data();
            let data = invoiceTable.row($(this).closest('tr')).data();
            let index = invoiceTable.row($(this).closest('tr')).index();
            let bank = ltgObj('sale.controlID').val();
            debugger;
            if (bank === '') {
                this.checked = false;
                //   invoiceTable.rows({ selected: true }).deselect();
                invoiceTable.row(index).deselect();
                ltgObj('sale.controlID').addClass('is-invalid');`

The class is updated and the checkbox is cleared but the row remains selected/highlighted and the footer shows one selected row. tried both rows and row option
Sorry but test case is difficult as no public access.
Thanks.

This question has an accepted answers - jump to answer

Answers

  • toomanyloginstoomanylogins Posts: 34Questions: 11Answers: 0

    I also have serverSide: true, If that is relevant.

  • allanallan Posts: 65,082Questions: 1Answers: 10,775 Site admin

    Can you try Select 3.1.0, the current release, please? I think what you are describing has been fixed.

    Allan

  • toomanyloginstoomanylogins Posts: 34Questions: 11Answers: 0

    Updated from builder
    * Included libraries:
    * DataTables 2.3.4, Editor 2.5.0, Buttons 3.2.5, Select 3.1.0, StateRestore 1.4.2

    and jQuery v3.7.1

    Same result I am afraid. The class is added to the bank select and the row checkbox cleared but row remains selected.
    Paul.

  • kthorngrenkthorngren Posts: 22,270Questions: 26Answers: 5,123

    I built a test case based on your code snippets:
    https://live.datatables.net/herazaqi/1/edit

    Using invoiceTable.row(index).deselect() seems to work as expected. Select a row then click on the Firstname column (I added the class selectPost to this column.

    I made some guesses of what your solution is. Used the select checkbox option but you may be referring to a different checkbox. Server side processing shouldn't matter - the test case shows this. The test case uses DT 2.2.0 and Select 3.0.0. You may consider upgrading to the latest versions.

    Please update the test case to replicate the issue or post a link to a test case showing the problem so we can help debug.

    Kevin

  • kthorngrenkthorngren Posts: 22,270Questions: 26Answers: 5,123

    Looks like you two made some posts while I was creating the test case :smile:

    Kevin

  • toomanyloginstoomanylogins Posts: 34Questions: 11Answers: 0

    Thanks for reply. The test case is not quite the same. I am trying to clear the row after it has been selected with the same click. Ie click the checkbox but if bank condition false then clear the select. Your example clears with a separate click.
    Does that make sense ?

  • toomanyloginstoomanylogins Posts: 34Questions: 11Answers: 0

    Is the problem caused because I am using

    `render: function (data, type, row, meta) {
                            if (row.select === true) {
                                data = '<input type="checkbox" class="form-check-input selectPost" checked/>';
                            } else {
                                data = '<input type="checkbox" class="form-check-input selectPost"/>';
                            }
    
                            return data;
                        }`
    

    For the checkbox and not render.select(), ?

  • kthorngrenkthorngren Posts: 22,270Questions: 26Answers: 5,123
    edited September 18 Answer ✓

    The test case is not quite the same. I am trying to clear the row after it has been selected with the same click.

    That's why we ask for a test case to understand your specific code flow. I updated the test case:
    https://live.datatables.net/herazaqi/4/edit

    I added the select and deselect events so you can see the order of the events. You can see your click event fires before the select so you are deselecting the row before the Select extension event fires and selects the row.

    One option is to move your code into the select event or use setTimeout() to delay the use of row().deselect(). Using the select event is probably better but here is an example with setTimeout():
    https://live.datatables.net/fivodiza/1/edit

    Kevin

Sign In or Register to comment.