with chosen plugin

mamady

How to create a <optgroup> with chosen plugin of editor like here?

tangerine

Search the forum, there are other posts for this including code example.

mamady

Unfortunately I couldn find mentioned posts, so I changes editor.chosen.js as follow :

 * @example
 * // Create an Editor instance with a Chosen field and data
 * new $.fn.dataTable.Editor( {
 *   "ajax": "php/todo.php",
 *   "table": "#example",
 *   "fields": [ {
 *           "label": "Item:",
 *           "name": "item"
 *       }, {
 *           "label": "Priority:",
 *           "name": "priority",
 *           "type": "chosen",
 *           "ipOpts": [
 *               { "label": "1 (highest)", "value": "1" },
 *               { "label": "2",           "value": "2" },
 *               { "label": "3",           "value": "3" },
 *               { "label": "4",           "value": "4" },
 *               { "label": "5 (lowest)",  "value": "5" }
 *           ]
 *       }, {
 *           "label": "Priority Group:",
 *           "name": "priority_group",
 *           "type": "chosen",
 *           "ipOpts": [
 *               { "label": "high", "group": true, "children": [
 *                 { "label": "1",           "value": "1" },
 *                 { "label": "2",           "value": "2" }
 *               ]  },
 *               { "label": "normal", "group": true, "children": [
 *                 { "label": "3",           "value": "3" },
 *                 { "label": "4",           "value": "4" }
 *               ]  },
 *               { "label": "low", "group": true, "children": [
 *                 { "label": "5",           "value": "5" },
 *                 { "label": "6",           "value": "6" }
 *               ]  }
 *           ]
 *       }, {
 *           "label": "Status:",
 *           "name": "status",
 *           "type": "radio",
 *           "default": "Done",
 *           "ipOpts": [
 *               { "label": "To do", "value": "To do" },
 *               { "label": "Done", "value": "Done" }
 *           ]
 *       }
 *   ]
 * } );
 *
 * @example
 * // Add a Chosen field to Editor with Chosen options set
 * editor.add( {
 *     "label": "State:",
 *     "name": "state",
 *     "type": "chosen",
 *     "opts": {
 *         "disable_search": true,
 *         "inherit_select_classes": true
 *     }
 * } );
 * 
 */

(function () {

var _Editor = $.fn.dataTable.Editor;
var _fieldTypes = _Editor.fieldTypes;

_fieldTypes.chosen = $.extend( true, {}, _Editor.models.fieldType, {
    "_addOptions": function ( conf, opts ) {
        var el = $(conf._input[0]);

        el.empty();

        if ( opts ) {
            if ( _Editor.pairs ) {
                // Editor 1.4 has a `pairs` method for added flexibility
                _Editor.pairs( opts, conf.optionsPair, function ( val, label, i ) {
                    el.append(new Option( label, val ));
                } );
            }
            else {
                for ( var i=0, iLen=opts.length ; i<iLen ; i++ ) {
                    var pair = opts[i];
                    if(pair.group) {
                        var optgroup = $('<optgroup>');
                        optgroup.attr('label',pair.label);
                        $.each(pair.children, function( index, leaf ) {
                            var option = $("<option></option>");
                            option.val(leaf.value);
                            option.text(leaf.label);
                            optgroup.append(option);
                        });
                        el.append(optgroup);
                    } else {
                        el.append(new Option(pair.label, pair.value));
                    }
                }
            }
        }
    },

    "create": function ( conf ) {
        conf._input = $('<select/>')
            .attr( $.extend( {
                id: conf.id
            }, conf.attr || {} ) );

        _fieldTypes.chosen._addOptions( conf, conf.ipOpts );

        // On open, need to have the instance update now that it is in the DOM
        this.on( 'open.chosen-'+conf.id, function () {
            conf._input.chosen( $.extend( {}, conf.opts, { width: '100%' } ) );
        } );

        return conf._input[0];
    },

    "get": function ( conf ) {
        return conf._input.val();
    },

    "set": function ( conf, val ) {
        conf._input.val( val );
    },

    "enable": function ( conf ) {
        conf._input.attr('disabled', false).trigger('chosen:updated');
        $(conf._input).removeClass( 'disabled' );
    },

    "disable": function ( conf ) {
        conf._input.attr('disabled', true).trigger('chosen:updated');
        $(conf._input).addClass( 'disabled' );
    },

    "update": function ( conf, options ) {
        _fieldTypes.chosen._addOptions( conf, options );
        conf._input.trigger('chosen:updated');
    }
} );

})();

please pay attention to ""priority_group"" for a sample data.

allan

I don't recall any other threads about this topic myself and couldn't see them from a search.

Unfortunately at this time Editor does not support the creation of optgroups directly through the ipOpts options.

What you would need to do is to modify the options directly yourself and then tell chosen to update from the select list.

You could do this using:

// Get the select element
var select = $('select', editor.field('myFieldName').node() );

.. add options to the list / manipulate the select list ...

// Tell Chosen to update
select.trigger('chosen:updated');

It is a little bit of a workaround, but I'm afraid that is really the only option at the moment (other than to modify the plug-in to support optgroups, which would be another option).

Regards,
Allan