DisplayController - Add a close button and remove header

nicontrols

Hi have a custom display controller that renders the editor after the last row in the datatable:

(function(window, document, $, DataTable) {


var self;

Editor.display.inline = $.extend( true, {}, Editor.models.displayController, {
    /*
     * API methods
     */
        "init": function ( editor ) {
            
            return self;
        },

        "open": function ( editor, append, callback ) {
            
            
            
            var table = $(editor.s.table).DataTable();
            
            var row = table.row(':last');
            //var row = editor.s.modifier;

            if (self._shown == true) {
                // Close any rows which are already open
                Editor.display.inline.close( editor );
                self._shown = false;
                return;
            }

            // Open the child row on the DataTable
            table
                .row( row )
                .child( append )
                .show();

            $( table.row( row ).node() ).addClass( 'shown' );

            if ( callback ) {
                callback();
            }
            
            self._shown = true;
            
            
        },

        "close": function ( editor, callback ) {
            var table = $(editor.s.table).DataTable();

            table.rows().eq(0).each( function ( idx ) {
                if ( table.row( idx ).child.isShown() ) {
                    table.row( idx ).child.hide();
                    $( table.row( idx ).node() ).removeClass( 'shown' );
                }
            } );

            if ( callback ) {
                callback();
            }
        },
        "_shown": false
        
} );

self = Editor.display.inline;

}(window, document, jQuery, jQuery.fn.dataTable));

How can I:

a) Remove the bootstrap header from the editor? <div class="DTE DTE_Action_Create">
b) Add a close button next to the create button?

allan

Hi,

The close button could be done with the buttons() API:

editor.buttons( [
  'Save',
  {
    text: "Close",
    action: function () {
      this.close();
    }
  }
] );

Or using the buttons option of the form-options object (basically the same array structure as used above).

To hide the header, you'll need to use a little CSS - e.g.:

div.DTE_Header {
  display: none;
}

Allan