Editor - Inject Blank/Static Options into Dynamic Option List

Apezdr

Hey there,

I'm having a issue with the Select2 plugin where the plugin requires a blank value as the first option so that the field doesn't default to the first option in the list (a legitimate value). I need to inject my own options.

fields: [
        {
            "label": "User Group Visibility:",
            "name": "TaskType.UserGroupVisiblity",
            "type": "select",
            "multiple": true,
            "separator": ',',
            "options": [
                { label: "No Group Association",    value: "Any" },
                { label: "Tech",    value: "Tech" },
                { label: "Truckload",    value: "Truckload" },
                { label: "Pricing",    value: "Pricing" }
            ]
        }

Like the example above basically, but I need the options that come over with this as well to combine into the predefined options. (see below for my server side code)

Field::inst( 'TaskType.UserIDAssociatedTo' )
            ->options( 'Users', 'id', array('EmailAddress', 'FirstName', 'LastName'), null, function ( $row ) {
                return $row['FirstName'].' '.$row['LastName'].' ('.$row['EmailAddress'].')';
            } )

Secondary but partially related issue, I have my table set to refresh the data at specified intervals using the code below

setInterval( function () {
            table.ajax.reload( null, false ); // user paging is not reset on reload
        }, interval );

But it seems that when i do this it is resetting the value of the select2 plugin to the value it was initialized with instead of what is in the record I have open to edit.

I'm happy to provide access to the page if someone can take a look.

allan

Looking at the Select2 documentation, it has a placeholder option. You could use that inside Editor by passing in the opts option to the plug-in:

{
  label: ...,
  name: ...,
  ...,
  opts: {
    placeholder: 'My placeholder value'
  }
}

Allan

Apezdr

{
                    "label": "Task Name:",
                    "name": "DataCollection.tasktypeid",
                    "type":  "select2",
                    "opts": {
                        "placeholder": "Select a Task",
                        "minimumInputLength": 0,
                        "tags": true,
                        "allowClear": true,
                        "createTag": function (tag) {
                            found = false;
                            $("#select2-ProjectTimeInput-results li").each(function() {
                                if ($.trim(tag.term).toUpperCase() == $.trim($(this).text()).toUpperCase()) {
                                    found = true;
                                }
                            });

                            // show the suggestion only if a match was not found
                            if (!found) {
                            
                                return {
                                    id: tag.term,
                                    text: '<span style="font-size: 9px; font-style: italic;">Create New Task Called:</span><span style="font-size: 9px; display: block;font-weight: bold;">' + tag.term + '</span>',
                                    // add indicator:
                                    isNew : true
                                };
                            }
                        },
                        "escapeMarkup": function(m) {
                            return m;
                        }
                    }
                    /*"placeholderDisabled": false,
                    "placeholder": "----" */
                },

This is the same code I had in place when I requested support yesterday. Thanks for getting back to me though. Is there anything else I can try?

allan

That looks like all that should be needed. Could you give me a link to the page so I can take a look and see what is going on please.

Thanks,
ALlan

Apezdr

I've private messaged you the link & creds.

Apezdr

Anything I can do to help you out with this? Did you want me to post the info here instead of private message?

allan

Sorry - I've not had a chance to look into it yet. I will do so shortly. Got your other message open in a tab!

Allan

Apezdr

For anyone curious I have achieved my goal client side with the following code snippets.

editor.on('initCreate.normalUse', function(e) {

Tying into this event I then find the field in the formContent and then the actual option list within the delegateTarget

var SolutionsCSD = $(e.currentTarget.dom.formContent.parentNode).find('#DTE_Field_ClientData-CSD');
var solutionsCSD = e['delegateTarget']['s']['editFields']['0']['fields']['ClientData.CSD']['s']['opts']['_input']['0'];

Finally I search the field to see if there are any options with no value and append if so; I also set the value to a blank value for good measure.

if ( !SolutionsCSD.find('[value=""]').length )
        {
            $(solutionsCSD).prepend('<option value=""></option>').val('');
        }