Datatable Editor inlineCreate Persistence/Sticky/Fixed with Conditional onBlur

steffes

Link to test case:
https://editor.datatables.net/examples/inline-editing/fullRowCreate.html

Description of problem:

I am modifiying the above demo to have a persistent inlineCreate('end') with a conditional onBlur to only close when editing another row. Setting onBlur : 'none' in the inline formOptions prevents existing rows inline editor to activate after clicking the edit row button. Any suggestions or different approaches to achieve this? What's the best way to check if the onBlur event is from clicking the edit row button? It is a small table of under 10 rows with no paging. The first inlineCreate('end') is called at initComplete of the Datatable. Thanks.

var editor = new DataTable.Editor({
    ajax: '../php/staff.php',
    fields: [
        {
            label: 'First name:',
            name: 'first_name'
        },
        {
            label: 'Last name:',
            name: 'last_name'
        },
        {
            label: 'Position:',
            name: 'position'
        },
        {
            label: 'Office:',
            name: 'office'
        },
        {
            label: 'Extension:',
            name: 'extn'
        },
        {
            label: 'Start date:',
            name: 'start_date',
            type: 'datetime'
        },
        {
            label: 'Salary:',
            name: 'salary'
        }
    ],
    formOptions: {
        inline: {
            //onBlur: "none", //currently preventing editing an existing row
            onBlur: function (e) {
                if ($(e.relatedTarget).closest('span').hasClass('edit')) {
                    return 'close';
                } else {
                    return 'none';
                }
            },
            onComplete: function () {
                editor.inlineCreate('end');
            },
            onCancel: function() {
                editor.inlineCreate('end');
            }
        }
    },
    table: '#example'
});

allan

That's a good question - I'm not sure that there is a better way of doing this at the moment I'm afraid. I'll need to have a bit of a deep think about this!

Allan

steffes

Thanks for taking a look @allan . I found a solution by keeping onBlur: 'none', explicitly closing any open inline editor, then "queueing" a new inlineCreate because close events were not hitting for me

var editor = new DataTable.Editor({
    ajax: '../php/staff.php',
    fields: [...],
    formOptions: {
        inline: {
            onBlur: 'none', 
        }
    },
    table: '#example'
});

$('#example').on('click', 'tbody span.edit', function (e) {

            // Check if there's already an inline create editor open
            if ($('#example' + ' [class^="DTE_"]').length) {
                editor.close(false);
            }
            editor.inline(myDatatable.cells(this.closest('tr'), '*').nodes(), {
                cancelHtml: '<i class="fa fa-times inline-cancel"></i>',
                cancelTrigger: 'span.cancel',
                submitHtml: '<i class="fa fa-floppy-o"></i>',
                submitTrigger: 'span.edit'
            });  
});

editor.on('opened', function(e, mode, action) {
   if (action !== 'create') {
     editor.inlineCreate('end');
  }
});

allan

Very nice - thanks for posting back with your solution .

Allan