CODEWITHSUNDEEP
jquerydatatablesjeditable
jlrolin
jlrolin

Reputation: 1614

How do I bind a double click before hitting ENTER on a Datatables cell?

I've been working on a grid control that works off of the KeyTable plug-in for Datatables. All has been going well with a few tweaks here and there, but there is one annoying issue with the plug-in. Below is the example code from the plug-in page:

$(document).ready( function () {
    var keys = new KeyTable( {
        "table": document.getElementById('example')
    } );

    /* Apply a return key event to each cell in the table */
    keys.event.action( null, null, function (nCell) {
        /* Block KeyTable from performing any events while jEditable is in edit mode */
        keys.block = true;

        /* Initialise the Editable instance for this table */
        $(nCell).editable( function (sVal) {
            /* Submit function (local only) - unblock KeyTable */
            keys.block = false;
            return sVal;
        }, {
            "onblur": 'submit',
            "onreset": function(){
                /* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
                 * it will 'esc' KeyTable as well
                 */
                setTimeout( function () {keys.block = false;}, 0);
            }
        } );

        /* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
        setTimeout( function () { $(nCell).click(); }, 0 );
    } );
} );

From what I can tell, the cell isn't made "editable" until the return key is hit, after which is now has a click event attached to it. Is there a way for me to attach a click event, in my case I want a dblclick, to the cells before I ever hit return? I've tried binding a function to the "td.focus" and and "example td" with no luck. I would like each cell to respond to a dblclick from the load, but also respond to the keys.

Upvotes: 1

Views: 1968

Answers (2)

jlrolin
jlrolin

Reputation: 1614

I added a dblclick delegate to the table cell, but the key to making this work was the last line:

$('#' + tableID).delegate('tr td.focus', 'dblclick', function () {
        $(this).editable(updateURL, 
            {
             "callback": function (value, settings) {
                keys.block = false;
             },
             "onblur": 'submit',
             "onreset": function(){
                setTimeout( function () {keys.block = false;}, 0);
             }
            } 
        );
        $(this).dblclick();
    });

The indirect click event call using the setTimeout function that is displayed in the examples was causing the jEditable event to fire, so I got rid of it. Works with just a simple call to the click event directly.

Upvotes: 0

Nibbler
Nibbler

Reputation: 493

You just have to bind a double click event on the cells you want to be edited and simulated a return key :

$('.cells').dblclick(function() {
    e = jQuery.Event("keypress");
    e.which = 13;
    e.keyCode = 13;
    $(this).trigger(e);
});

Upvotes: 1

Related Questions