trigger row selected from double click

advania

I'm trying to trigger a row to get selected the same way it would get selected with 'select: true' except with double click.

I found a bunch of posts where dblclick event is hooked up to the tr and then trigger toggleClass .. or various other suggestions.. but that doesn't trigger the same behavior as the 'select: true' clicks..

they trigger:

1) they highlight the row by adding 'selected' class.
2) they add a '1 row selected' message at bottom (by pagination stats)
3) they enable the disabled edit and delete buttons.

none of those happen when i toggle selected class or whatever else i have tried to trigger from a dblclick.

suggestions?

crwdzr

i just recently started using select and had to override its behavior too, though not for doubleclicking, the principle is the same. this will get you started, you may have to tweak the first listener to allow for row de-selection using .rows().deselect() or something similar

this is dependent on you having a rowID set up for each row, also keep select: true enabled for this

$('#myTable').on('click','tr',function(e){
    e.stopPropagation()
})
$('#myTable').on('dblclick','tr',function(e){
    e.stopPropagation()                        
    let rowID = $(this).attr('id')                           
    $('#myTable').rows('#'+rowID).select()
})

allan

I think you could simplify that a little to be:

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

No need to get the row id. You can pass the row node in as a selector for rows().

The other option would be to modify the Select code to just use dblclick rather than click.

Allan

advania

thanks so much for the input.. this is what i managed to hack together and it seems to work perfectly.

This lets me :

• Single click to select / deselect rows
• Double click to edit single row
• Ctrl+click to multi select single lines.(can skip ctrl og de-select)

(tested in chrome/firefox/safari)

only thing missing is shift to select start/end of rows.. but i'm also fine with that 'for now' ..

        $('#mvp_editor_'+active_tab+' tbody').on('click','tr',function(e){
            e.stopPropagation()
            if(!$(this).hasClass('selected')){
                console.log('has selected');
                if (!e.ctrlKey) {  // Check if ctrl is clicked, if not de-select all others.
                    if($(this).siblings().hasClass('selected')) { mvp_table.rows('.selected').deselect(); }
                } // Regular select..
                mvp_table.rows(this).select();
            } else {
                    // Also works on multi select without keypress, and that's fine.
                    mvp_table.rows(this).deselect();
            }
        })

        var clicks = 0;
        $('#mvp_editor_'+active_tab+' tbody').on('mousedown', 'tr', function(event) {
            event.preventDefault();
            clicks++;
            setTimeout(function() { clicks = 0; }, 300); // 300ms seems plenty of time

            if (clicks === 2) {
                mvp_table.rows('.selected').deselect(); // Could use siblings+detect.. but this seems to work fine.
                mvp_table.rows(this).select();
                mvp_table.button('editButton:name').trigger(); // Edit button should now be enabled and ready to fire.
                return;
            } else {
                // Regular mousedown event.. ignore.
            }
        });

allan

Select keeps its own internal pointer from its click event for the shift click. So if you wanted to have a shift click you'd need to replicate that logic externally.

Allan