Answers

• tangerine Posts: 3,348Questions: 36Answers: 394

  February 2015

  Search the forum, there are other posts for this including code example.
• mamady Posts: 5Questions: 2Answers: 0

  February 2015

  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 Posts: 61,665Questions: 1Answers: 10,096 Site admin

  February 2015 edited February 2015

  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