select2 plugin and default values in Editor

bsdz

Hi

What's the recommended method for loading in default values into a select2 field Editor? I'm using multiple attr and I can create a new row and save data to remote server but when I edit a row I am unable to load the select2 field with the datatables column's values. I currently am rendering this column as a comma separated list of values, ie "1,2,3,..".

The select2 documentation suggests adding a selected option for each value (https://select2.github.io/examples.html#data-ajax). I've also seen a possible method $myselect2.val("2").trigger("change") that might work although I'm not sure if I'd need to use inst() method to call this. Perhaps there's another way?

Also, how can I render a select2 column in DataTables itself? A bit like the Tags column here (http://yadcf-showcase.appspot.com/DOM_source_select2.html).

Thanks for any help in advance
Blair

bsdz

I resolved the issue by setting the column value to an array of dictionaries, ie,

[{ id:"100", text: "label100"}, { id:"200", text: "label200"} ]

then patching the select2 plugin get method like so:

    set: function ( conf, val ) {
        if (conf._input.prop('multiple')) {
            conf._input.empty();
            var vals = new Array();
            for (let pair of eval(val)) {
                conf._input.append($("<option/>").val(pair["id"]).text(pair["text"]));
                vals.push(pair["id"])
            }
            conf._input.val( vals ).trigger( 'change', {editor: true} );
        }
        else {
            conf._input.val( val ).trigger( 'change', {editor: true} );
        }
    },

Admittedly not the nicest code. Finally for the column render I did this:

                "render": function (val, type, row) {
                    var labels = new Array();
                    for (let pair of eval(val)) {
                        labels.push(pair["text"])
                    }
                    return labels.join(", ");
                }

Hope this might help someone else in future.

kthorngren

I'm able to use the select2 plugin using value/label pairs for the columns. I did not make changes to the plugin.

Here is an example Editor field:

=
{ type: 'select2', label: 'Device Types:', name: 'main.fk_types_list[]',
       opts: { multiple: true,
       placeholder: 'Select Device Types' }
},

The corresponding Datatables column:

 { data: 'device_types', 
      editField: 'main.fk_types_list[]',
      render: '[, ].label
},

My device_types object looks like this:

[{value: 1, label: "Call Router"}, {value: 7, label: "GW PG"}, {value: 2, label: "Logger"}]

I get the default selections and can add and delete as needed.

Kevin

bsdz

Thanks @kthorngren. I think the difference might be that I am using a remote data source with paging for my select2. So the labels do not already exist in memory and cannot be selected from a list of ids. Please correct me if I'm wrong. ie

           {
                label: "Foo:",
                name: "1",
                "type": "select2",
                
                 opts: {
                     ajax: {
                            dataType: "json",
                            url: "/my/select2/list",

                            data: function(params) {
                                return {
                                    term: params.term || '',
                                    page: params.page || 1
                                }
                            },
        ...
                attr:
                {
                    multiple: 'multiple'
                },
        ...
         }