on 'open' event for all editors

Loren Maxwell

I have several editors on a single page and want to modify each with the open:

var editor_1 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

var editor_2 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

var editor_3 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

Is there a way to do a single open for any and all instances of editors that open on that page?

Something like:

var editor_1 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
})

var editor_2 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
})

var editor_3 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
})

any_and_all_editors.on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

allan

There isn't like that, but you can at least share the function between them:

function editorOpen(e, mode, action) {
  $(".modal-dialog").addClass("modal-xl");
}

editor_1.on('open', editorOpen);
editor_2.on('open', editorOpen);
editor_3.on('open', editorOpen);

However, there is a better option. The same modal is shared between them all, so you only need to add it once. Of course you might not be sure which one will be opened first, but you can use displayNode() to get the modal container. So after editor_1 initialisation:

$('div.modal-dialog', editor_1.displayNode()).addClass('modal-xl');

will do it. Or even better, use the classes property of the Bootstrap controller for Editor:

DataTable.Editor.display.bootstrap.classes.modal = 'modal-xl modal-dialog-scrollable modal-dialog-centered';

I'd go with the last option, but there is more than one way of doing this

Allan

Loren Maxwell

Thanks @allan, that's good for the modal but I was actually hoping to do a few other things as well (I shortened the code in my original question for brevity, but unfortunately lost some of the detail I should have captured!):

var editor_1 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
    $(".col-form-label").addClass("text-info-emphasis")
    $(".form-control").addClass("fw-bold")
})
 
var editor_2 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
    $(".col-form-label").addClass("text-info-emphasis")
    $(".form-control").addClass("fw-bold")
})
 
var editor_3 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
    $(".col-form-label").addClass("text-info-emphasis")
    $(".form-control").addClass("fw-bold")
})

It seems the editorOpen function might be the best given the other things I'm trying to do.

Thanks!

allan

Agreed - a shared function would be best in this case.

Allan

Loren Maxwell

My ultimate solution was to use the initEditor to attach an open to each new instance of Editor:

$(document).on( 'initEditor', function ( e, inst ) {
    // Attach an 'open' event to all Editors
    inst.on( 'open', function () {
        // Perform some formatting or whatever
    });
});