Invoke editor for a row upon double click

yet

How can you invoke the editor by double clicking on a particular row ?

allan

With a jQuery event listener that calls edit():

$('#myTable').on( 'dblClick', 'tbody tr', function () {
  editor.edit( this, {
    // form options
  } );
} );

Allan

yet

This works in general. However with one strange effect.

Clicking on a row opens the editor windown with the form but without any action associated. I can only close the window with the ESC key.

Double click will only the editor window correctly in edit mode after having edited a row earlier using the "Edit" button...then all subsequent double clicks open the editor window in edit mode.

allan

Yup - you'd need to use the form-options object to set the form options - for example:

$('#myTable').on( 'dblClick', 'tbody tr', function () {
  editor.edit( this, {
    title: 'Edit',
    buttons: 'Save'
  } );
} );

You could also use the methods such as buttons() and title() directly - its the same effect.

Allan

yet

Not exactly what I am looking for. In particular because I have to pass in language specific strings which where already configured earlier for the forms using the i18n property. Double click should exactly behave like clicking on Edit for the selected row.

allan

The i18n options configure the Editor edit button. That basically does what I've shown above (i.e. called edit()) with whatever configuration properties are needed.

If you had the edit button on the page you could calls its action method (button().trigger()), but I'm not sure if you do or not.

If you don't then you'd need to configure the form options as I have described above, and you could use the internationalised strings there.

Allan

yet

This is my buttons configuration attached to the DT:

    var buttons =  [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }, 
        {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
    }];

The example in https://datatables.net/reference/api/button().trigger() is confusing.

What is the index 2-1 in the example why can't I just refer to the 'edit' button?!

table.button( '2-1' ).trigger();

yet

In this case I needed

table.button("1").trigger() 

since the Edit button was the second of my buttons. Calling a button by index appears completely broken but anyway..

rduncecb

You can give the buttons names.

{ extend: 'edit',   editor: editor, name: 'editButton' },

then you can use

table.button('editButton:name').trigger()

See the button-selector docs - https://datatables.net/reference/type/button-selector

allan

Calling a button by index appears completely broken but anyway..

I'm not clear in which way it is broken? Are you saying that using 1 doesn't work for you? That would be the correct selector to use for the button. The button selector is fully documented here.

Does the trigger achieve the effect you were looking for?

Allan

advania

What about click and dblclick together using something like this?

Could this be integrated with the "select: true" functionality?

         var clicks = 0, delay = 400;
         $(element).on('mousedown', function(event) {
            event.preventDefault();
             clicks++;
 
            setTimeout(function() {
                 clicks = 0;
             }, delay);
 
             if (clicks === 2) {
                 // double click event handler should be here
                 clicks = 0;
                return;
             } else {
                 // mousedown event handler should be here
             }
         });
 

advania

Btw i have been using the button trigger without problem.. i wanted to use it to trigged edit button from double click.. but of course the click function today doesn't account for double-click in the way the example would do .
but this works just fine..
var mvp_table = $("#table).dataTable(....

and then i can use this to trigger the edit button.. seen on issues in chrome, firefox or safari.

mvp_table.button('editButton:name').trigger();