Editor and Select2-plugin: Create extra options 'on-the-fly'

Arthur_Kozinski

Probably I'm asking to much, but is there any efficient way to allow the 'creation' of new options (coming from a MJOIN in the Editor) with the option "createTag" which comes with the select2-component?
Or am I a bit too optimistic now ?

I would like to be able to create 'new tags' on the fly in the editor when editing a record.

This possible in select2 when using "createTag" option, but I don't know if it's worth the effort to try and figuring this out in combination with the Editor?

rf1234

Hi Arthur,

I don't have it for "select2", but for "selectize" which is similar. There is an Editor plugin for selectize, too. You might want to use that as well. I use both by the way. They are not that much different actually.
This is what it looks like in my code:

fields: [ {
        label: lang === 'de' ? 'Kontrahent:' : 'Counterparty:',
        name:  "contract.gov_manual_creditor_id", //render creditor name
        type: "selectize", 
        opts: {
            create: true,
            createFilter: function(val) {
              return ( isNaN(val) || val.indexOf('.') > -1 ) ? val : false;
            },
            maxItems: 1,
            openOnFocus: false,
            allowEmptyOption: false,
            placeholder: lang === 'de' ? 
                "Bitte Kontrahenten wählen oder hinzufügen" : 
                "Please select a Counterparty or add one",                
            render: {
                option_create: function(data, escape) {
                    var add = lang === 'de' ? "Neu: " : "Add ";      
                    return '<div class="create">' + add + '<strong>'
                           + escape(data.input) + '</strong>&hellip;</div>';
                }
              }
            }
    },

The "createFilter" returns an existing "id" if an existing option is selected. It returns "false" if no existing option is selected. That is the case if the field value is not numeric or it contains a period.

On the server I need to filter out the newly entered counterparties on "writeCreate" and on "writeEdit" - and INSERT them into the database.

->on( 'writeCreate', function ( $editor, $id, $values ) {
    $manualId = $values['contract']['gov_manual_creditor_id'];
    if ( ( ! is_numeric( $manualId ) ) || //we don't have a valid id => new manual counterparty entered on the fly
         ( count( explode('.', $manualId) ) > 1 ) ) { //strpos didn't work with a period!!
        if ( isset($values['contract']['counterparty']) ) {
            processNewManualCreditor( $editor->db(), $id, $manualId, $values['contract']['counterparty'] );
        }
    }
} )
->on( 'writeEdit', function ( $editor, $id, $values ) {
    $manualId = $values['contract']['gov_manual_creditor_id'];
//if we have periods in the string it shouldn't be considered as numeric!!
    if ( ( ! is_numeric( $manualId ) ) || //we don't have a valid id => new manual counterparty entered on the fly
         ( count( explode('.', $manualId) ) > 1 ) ) { //strpos didn't work with a period!!
        if ( isset($values['contract']['counterparty']) ) {
            processNewManualCreditor( $editor->db(), $id, $manualId, $values['contract']['counterparty'] );
        }
    }
} )

Arthur_Kozinski

Thank you so much for this answer, rf1234!

Your way of reasoning is perfectly clear and I will start implementing your logic (first with select2, but selectize looks very promising as well) right away!!

(Still discovering new aspects of Datatables and Editor thanks to people like you! Great way to keep learning!)

rf1234

Glad I could help! Please share your select2 solution for this once you have it ready. I came from using "selectize" and chose "select2" for options grouping with collapsible optgroups which turned out to be rather difficult. Eventually got it working.

To make select2 look the same as selectize I use this CSS so that it is indistinguishable from a user's point of view. This allows me to use "select2", "selectize" and the Editor built-in "select" field types in parallel - depending on the use case.

/*bigger dropdown for select2 */
.select2-container--default .select2-results>.select2-results__options {
    max-height: 450px !important;
}
/*smaller options for select2 */
.select2-container--default .select2-results__option {
    line-height: 0.5 !important;
}

/* Make Select2 boxes match Bootstrap3 as well as Bootstrap4 heights: */
.select2-container--default .select2-selection__rendered {
    line-height: 32px !important;
}

.select2-container--default .select2-selection {
    height: 34px !important;
}

/* hide that arrow */
.select2-container--default .select2-selection__arrow b {
    display:none !important;
}