Datatables & Custombox

Datatables & Custombox

nicontrolsnicontrols Posts: 16Questions: 7Answers: 1

Would there be any way for me to use Custombox when displaying the modal window that appears when clicking the Edit button?

            var modal = new Custombox.modal({
                content: {
                    effect: 'blur',
                    target: '.DTE_Action_Edit'
                },
                loader: {
                    active: false
                }
            });
            modal.open();

It would style the modal (the way it loads) to match all my existing ones.

I thought maybe I could fire the above script as soon as the Edit modal appears, but the following fires before the modal is created:

editor.on( 'initEdit', function ( e, node, data, items, type ) {
    if (type=="main") {
            var modal = new Custombox.modal({
                content: {
                    effect: 'blur',
                    target: '.DTE_Action_Edit'
                },
                loader: {
                    active: false
                }
            });
            modal.open();
    }
} );

Answers

  • allanallan Posts: 48,282Questions: 1Answers: 6,967 Site admin

    Yes indeed - a display controller plug-in could be written to use a different modal view.

    I don't think I've seen CustomBox before. Looks nice!

    Allan

  • nicontrolsnicontrols Posts: 16Questions: 7Answers: 1

    Hi allan

    Thanks for that! Could you possibly nudge me in the right direction? I don't expect you to do the work for me but I'm struggling with it.

    modal.open in Custombox basically builds the container around the modal window (blurred background, removes scroll bar etc).

    So would my display controller look something like the following?

        init: function ( editor ) {
     
          return Editor.display.myDisplayController;
        },
     
        // Show the form
        open: function ( editor, form, callback ) {
    
          var modal = new Custombox.modal({
             content: {
                  effect: 'blur',
                  target: '.DTE_Action_Edit'
              },
              loader: {
                  active: false
              }
          });
          modal.open();
    
        },
     
        // Hide the form
        close: function ( editor, callback ) {
          Custombox.modal.close()
        }
    
Sign In or Register to comment.