trigger row selected from double click

trigger row selected from double click

advaniaadvania Posts: 35Questions: 13Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • crwdzrcrwdzr Posts: 31Questions: 5Answers: 6
    edited September 2017

    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()
    })
    
  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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

  • advaniaadvania Posts: 35Questions: 13Answers: 0

    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.
                }
            });
    
  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

This discussion has been closed.