FixedColumns and Double clicks

FixedColumns and Double clicks

PaulusPaulus Posts: 69Questions: 17Answers: 5

Hello,
Back again! updating my application.
I am trying to implement double-click to display details of a selected (double-clicked) row.

$('#example tbody').on('dblclick', 'tr', function () {
   dataTable.rows(this).select();
});

My table has three fixed columns (including the numbered column). The above code works but not on the fixed columns. Any idea on how to receive the double-click event from a fixed column?
The requirement (using Bootstrap 3 version, with editor and select plugins):
1. Select the double-clicked row (a problem for fixed columns)
2. Display the selected data (not a problem, if selection works)

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    The FixedColumns doc explains that the fixed columns are a separate table from the original table. Inspecting the fixed columns show they have a class DTFC_Cloned. You could try something like this in addition to your other event:

    $('.DTFC_Cloned tbody').on('dblclick', 'tr', function () {
       dataTable.rows(this).select();
    });
    

    Kevin

  • PaulusPaulus Posts: 69Questions: 17Answers: 5

    Hello Kevin,
    Thanks for the reply. Unfortunately, that also did not work, and I have tested the code below too - also fails.

    $(table.table().container()).on('dblclick', 'tr', function () {
        var row = table.row(this);
    
        console.log('Row Index = ' + row.index());
    });
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited January 2018

    Your option seems to be a better one. I've gotten both to work:

    Mine:
    http://live.datatables.net/pozufequ/3/edit

    Yours:
    http://live.datatables.net/cocugiju/1/edit

    with editor

    Do you have inline editing enabled? Maybe thats interfering.

    Kevin

  • PaulusPaulus Posts: 69Questions: 17Answers: 5

    Hello Kevin,
    Thanks for the support. I think the main problem is with the select plugin. If you set it to true in the samples, you will see the problem.

      var table = $('#example').DataTable({
            scrollY:        300,
            scrollX:        true,
            scrollCollapse: true,
            paging:         false,
            fixedColumns:   true,
            select: true
      });
    

    Maybe I just have to disable the select plugin and handle all clicks and selections myself.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    If you use select: true, then Select is added a click event listener to the table rows that will select / deselect rows as required. If you also have a double click event listener on the same rows which is also attempting to control the row selection then yes, weird things are going to happen.

    Two options:

    1. Modify Select to use dblclick rather than click
    2. Don't use select: true. You can still use the Select API, that is always enabled on the table if you include the Select library on the page.

    Allan

  • PaulusPaulus Posts: 69Questions: 17Answers: 5

    Thanks Allan for the explanations. The initial implementation is to select (single click) and click Show Details button to display the additional information. Now, I want to add the double clicks to directly display the details. This is why the select: true is left in there.

    I will try the suggestions to find the best option for this case, thanks.

  • PaulusPaulus Posts: 69Questions: 17Answers: 5

    Hello Allan,
    Please, can you investigate this issue? it seems to be a bug in the FixedColumn implementations.
    I have turned the selection off (even setting select: false) and used the API to handle the double clicks and select a row. The result is the same, it works but not in fixed columns.

    I then logged the events in both types of columns and found that the fixed columns do not raise double-clicks (dblclick) event!

    Non-fixed Columns (double-clicks) (IE11 and Firefox 58)
    click
    click
    dblclick

    Fixed Columns (double-clicks) (IE11 and Firefox 58)
    click
    click

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Can you show me the code you are using to activate the select action please? Did you modify the library or use a custom event handler?

    Allan

  • PaulusPaulus Posts: 69Questions: 17Answers: 5

    Hello Allan,
    Thanks for the reply. I simply disabled the selection plugin (commented out and later set select: false) and using the following code.

                $(table.table().container()).on('dblclick', 'tr', function () {
                    console.log('dblclick');
                });
    
                $(table.table().container()).on('click', 'tr', function () {
                    console.log('click');
                });
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    I'm not certain how you are using that code to activate the selection. Are you using row().select() for example?

    Also its not a good idea to use both click and dblclick on the same element, as you can't tell if a click is going to turn into a double click.

    Allan

  • PaulusPaulus Posts: 69Questions: 17Answers: 5

    Hello Allan,

    The issue is not with the row().select, but whether the events are raised or not, and it seems the double-click event is not being raised in the fixed columns.

    If the events are raised then I could implement the selection.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited February 2018 Answer ✓

    Single and double click on the fixedColumn seems to work here with your events:
    http://live.datatables.net/fupugonu/1/edit

    Kevin

  • PaulusPaulus Posts: 69Questions: 17Answers: 5

    Hello Kevin,

    Tried it, I can confirm that here too. Allan is right on handling both events. I will look further into this, sorry for the false claim.

This discussion has been closed.