FixedColumns and Double clicks

Paulus

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)

kthorngren

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

Paulus

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

kthorngren

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

Paulus

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.

allan

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

Paulus

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.

Paulus

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

allan

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

Paulus

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

allan

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

Paulus

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.

kthorngren

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

Kevin

Paulus

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.