Assigning class to option w/ Select2 plug-in

mguinness

Currently when the editor field plugin for Select2 creates an option there is no way to define the class. I came across this issue when looking at How to pass <option> attributes to select2. I made a simple change to editor.select2.js to make this possible, see addClass() addition below:

success: function (json) {
    var addOption = function (option) {
        if (conf._input.find('option[value="' + option.id + '"]').length === 0) {
            $('<option/>')
                .attr('value', option.id)
                .text(option.text)
                .addClass( typeof conf.optionClass === 'function' ? conf.optionClass(option) : null )
                .appendTo(conf._input);
        }
    }
    ...
}

When using with an ajax data source the item in the returned object can be used to determine the class in the editor options (see below). This works well for me and I think other users would find this useful too. I noticed that editor.select2.js isn't in GitHub, is it possible to merge this change into your editor repo?

optionClass: function (json) {
    return json.deleted ? 'deleted' : null;
}

allan

Thanks for posting this up and sharing your solution with us!

It looks like a reasonable addition - does Select2 not have some kind of callback to do that though? But yes I can get that added in if others find it useful as well.

Regards,
Allan

mguinness

Yes the two callbacks in select2 options are templateResult and templateSelection, but when an option is added externally they don't have access to the source json. This was the case I encountered when editor form initializes and assigns each control with the initial data using set().

mguinness

For anyone needing the complete solution, see below for the missing pieces - you need to be using Select2 4.0.1 or above.

Add to stylesheet:

.select2-selection__choice.deleted, .select2-selection__rendered.deleted {
    color: red;
}

Select2 control options:

opts: {
    ajax: ...,
    templateResult: formatDeleted,
    templateSelection: formatDeleted
}

Function setting class:

function formatDeleted(data, container) {
    $(container).toggleClass('deleted', data.deleted);

    if (data.element)
        $(container).addClass($(data.element).attr('class'));

    return data.text;
}

allan

Got it - thanks! And thanks for posting this, I'm sure others will find it useful - and to those who do, please post here to let me know so I can integrate it.

Allan

josh5555

Can this be integrated and added to https://editor.datatables.net/plug-ins/field-type/editor.select2? We'd like to use this but would prefer that this was included in the official Select2 plugin rather than having to change the code ourselves.

mguinness

Is it possible that this change can be included to editor.select2.js? If not, should I post a comment on Select2 documentation page linking to this forum post for others?

allan

Yes, a comment on the Select2 page would be a great start to make this more visible to others.

Thanks!
Allan

mguinness

I added a comment to https://editor.datatables.net/plug-ins/field-type/editor.select2 but it hasn't been accepted by moderators yet.