Adding a select drop-down to the Editor

pychap

Hi,
I need to add a dropdown select option to the editor, the user to select either "iOS", "Android", and "UWP" and it's not working. I've added a operating_system": "", line to my json file.
After looking at the page on Select2, and using the examples, it's not working, my code starts line 16.
I have linked the plugins
I don't know where to put the example // Add a Select2 field to Editor with Select2 options set javascript.
I've attached the script on the page (it's not a public facing page. Perhaps if needed I could open a Codepen if that would help.
My script

    <script>
        var editor; // use a global for the submit and return data rendering in the examples
        $(document).ready(function() {
            editor = new $.fn.dataTable.Editor({
                ajax: "dependencies/vuforia-version-mapping.json",
                table: "#vSevenOne",
                fields: [{
                    label: "Timestamp",
                    name: "time_stamp",
                    type: "datetime",
                    def: function() {
                        return new Date();
                    },
                    format: 'MM\u002FDD\u002FYYYY h:mm a',
                    fieldInfo: 'Month, day, year, time, am\u002Fpm.'
                }, {
                    label: "OS",
                    name: "operating_system",
                    type: "select2",
                    options: [{
                        label: "iOS",
                        value: "1"
                    }, {
                        label: "Android",
                        value: "2"
                    }, {
                        label: "UWP",
                        value: "3"
                    }]
                }, {
                    label: "Unity Version:",
                    name: "unity_version"
                }, {
                    label: "Vuforia Version:",
                    name: "vuforia_version"
                }, {
                    label: "Public Release:",
                    name: "public_release",
                    type: "datetime",
                    def: function() {
                        return new Date();
                    },
                    format: 'M/D/YYYY',
                    fieldInfo: 'US style m/d/y format'
                }, {
                    label: "URL",
                    name: "url"
                }, {
                    label: "External Messaging: \u0028please be aware that this is public-facing\u0029",
                    name: "external_notes"
                }, {
                    label: "Internal Notes:",
                    name: "internal_notes"
                }]
            });

            $('#vSevenOne').DataTable({
                dom: "Bfrtip",
                ajax: "dependencies/vuforia-version-mapping.json",
                columns: [{
                    data: "time_stamp"
                }, {
                    data: "operating_system"
                }, {
                    data: "unity_version"
                }, {
                    data: "vuforia_version"
                }, {
                    data: "public_release"
                }, {
                    data: "url"
                }, {
                    data: "external_notes"
                }, {
                    data: "internal_notes"
                }],

                select: true,
                buttons: [{
                    extend: "create",
                    editor: editor
                }, {
                    extend: "edit",
                    editor: editor
                }, {
                    extend: "remove",
                    editor: editor
                }]
            });
        });
    </script>

Any help greatly appreciated and thank you ahead of time!
Peter

pychap

This is the block that I don't know where to add:

// Add a Select2 field to Editor with Select2 options set
editor.add( {
   "label": "State:",
   "name": "state",
   "type": "select2",
   "opts": {
       "placeholder": "Select State",
       "allowClear": true
   }
} );

allan

Hi Peter,

You have a Select2 field defined in your code above as you note (starting at line 16) so I don't think you need to specifically add the editor.add... block from your second message anywhere. You've already got the field you need.

Have you loaded Select2 and also the Editor/Select2 plug-in on your page? Are there any errors shown in the browser's console? Are you able to give me a link to the page showing the issue (what you have above actually looks okay, so it would be useful to see the page and its data to understand fully why it isn't working). Send me a PM if you don't want to make the link public (which you can do by clicking my name above and then "Send message").

Regards,
Allan

pychap

Hi Allan,

Thank you for your prompt reply!

I ended up using the example's code from the Field Types page, and that was sufficient for what we needed.

The block of code ended up being this:

{
    label: "Select OS",
    name: "operating_system",
    type: "select",
    options: [{
        label: "iOS",
        value: "iOS"
    }, {
        label: "Android",
        value: "Android"
    }, {
        label: "UWP",
        value: "UWP"
    }]
}

I was building out a jsfiddle for you but with all the dependencies it got too hairy. :-)

Thank you again,
Peter