Editor 1.6.2 - select options

ZakInterDev

Hi Allan

I noticed you've put the ability to add attributes to the inputs in 1.6.2: "Ability to provide attributes for input / option elements in select, checkbox and radio field types. This can be used to provide additional meta information for each option for event handlers. These attributes are added by providing an attr option in the object that describes each option.".

Can you give an example of how I would add a global data attribute (data-*) to select <option>s?

Thanks in advance

allan

Yes - you might have the list of options defined as:

[
  { "label": "One", "value": 1 },
  { "label": "Two", "value": 2 },
  ...
]

What you can do is add an attr object to each of those options objects:

[
  { "label": "One", "value": 1, "attr": { "data-type": "link" } },
  { "label": "Two", "value": 2, "attr": { "data-type": "linked" } },
  ...
]

Allan

ZakInterDev

Can you confirm if this works for the select2 plug-in as well? As I can't seem to get it working and not sure if I'm doing something wrong. (Got it working with normal 'select' type).

Versions:
Editor: 1.6.2
Select2: 4.0.3
FieldType-Select2: 1.6.2

ZakInterDev

Did some digging, looks like it isn't.

I've added it in myself for now, in the FieldType-Select2-1.6.2 -> editor.select2.js file.

Simply copied what you had done for the 'select' field type. Code below for anyone who is interested. Would be nice if you can add this in Allan, as my company uses select2 standard with all websites now

Before:

_fieldTypes.select2 = {
_addOptions: function ( conf, opts ) {
        var elOpts = conf._input[0].options;

        elOpts.length = 0;

        if ( opts ) {
            DataTable.Editor.pairs( opts, conf.optionsPair, function ( val, label, i ) {
                elOpts[i] = new Option( label, val );
            } );
        }
    },
//omitted the rest
}

After:

_fieldTypes.select2 = {
_addOptions: function ( conf, opts ) {
        var elOpts = conf._input[0].options;
                var countOffset = 0;
        elOpts.length = 0;
                countOffset = elOpts.length;
        if ( opts ) {
            DataTable.Editor.pairs( opts, conf.optionsPair, function ( val, label, i, attr ) {
                //elOpts[i] = new Option( label, val );
                                var option = new Option( label, val );
                option._editor_val = val;

                if ( attr ) {
                    $(option).attr( attr );
                }

                elOpts[ i+countOffset ] = option;
            } );
        }
    },
//omitted the rest
}

Tested and works, but probably not fine tuned as it was a simple copy paste.

allan

No, it won't work for Select2.

This StackOverflow question details how you can provide custom data for Select2.

Allan

ZakInterDev

Well as I said at the end of my previous post, it does work. When selecting a new option, I can print out the new data-attribute linked to it.

editor.field('table.field').input().find(':selected').data('attribute');

It's not accessing it through select2, but the code in my previous post at least adds the data attributes to the original select list. Whereas the current select2 JS file doesn't do that. Giving me the access I need.

Also tried the StackOverflow answer, doesn't quite work with the Editor middle man.

{value: 2, label: "ABC Desc", data-uom: "M"} 

Unable to access 'data-uom' with

var field = editor.field('table.field').inst().select2('data')[0];
console.log(field.data-uom);

allan

Sorry - I didn't see your second reply before I wrote my own - had it own in a tab to reply to.

Thanks for your post - good to hear you have a workaround for the moment.

I'll take a look into it in more detail shortly.

Allan

ZakInterDev

No worries Yeah just figured it can't hurt to have it in there as well, although you're not accessing it through select2.