Datatable Editor inlineCreate Persistence/Sticky/Fixed with Conditional onBlur

Datatable Editor inlineCreate Persistence/Sticky/Fixed with Conditional onBlur

steffessteffes Posts: 2Questions: 1Answers: 0

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'
});

Answers

  • allanallan Posts: 64,508Questions: 1Answers: 10,662 Site admin

    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

  • steffessteffes Posts: 2Questions: 1Answers: 0

    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');
      }
    });
    
Sign In or Register to comment.