Popup Cell Editor "dropdown"

This View configuration is used to create a popup cell editor containing a single SELECT control within the Overlay.

Synonyms for this editor include "select" and "combobox".

Basic Usage

   // Column definition ... simple Array data
   { key:"inTheForest", editor:"dropdown",
     editorConfig:{ dropdownOptions:[ "lions", "tigers", "bears", "oh my!" ] }
   }

   // Column definition ... options via Object type data
   { key:"color", formatter:"custom", formatConfig:stypesObj,
     editor:"select", editorConfig:{
        selectOptions:{ 0:'Red', 1:'Green', 2:'Fuschia', 3:'Blue' }
     }
   }

   // Column definition ... options via Array of Objects, non-trivial!
   { key:"firstTopping", editor:"dropdown",
     editorConfig:{
       dropdownOptions:[
          {controlUnit:'a7',  descr:'Pepperoni'},    {controlUnit:'f3', descr:'Anchovies'},
          {controlUnit:'b114',descr:'Extra Cheese'}, {controlUnit:'7', descr:'Mushrooms'}
        ],
       templateObject:{ propValue:'controlUnit', propText:'descr' }
     }
   }

Standard Configuration

This editor creates a SELECT element within the popup Editor View container positioned directly over the TD element and populated via a Template (default Template.Micro, optionally Handlebars or other). The "options" are set via the "dropdownOptions" (or selectOptions, comboboxOptions) setting and can be either Array based or an Object hash.

The configuration {Object} for this cell editor View is predefined as;

   Y.DataTable.EditorOptions.dropdown = {
       BaseViewClass:  Y.DataTable.BaseCellPopupEditor,
       name:           'dropdown',    // OR 'select' or 'combobox'

       // Define the template for the SELECT and OPTIONS ...
       templateObject: {

           // Template Handlebars version ...
           // NOTE: This editor currently uses Handlebars only, intend to use Template.Micro
           //       but need to get this template micro http://yuilibrary.com/projects/yui3/ticket/2533040 fixed
        //   html: '<select class="myselect">'
        //       + ''
        //       + '</select>'

           // Template Micro version ...
           html: '<select class="myselect">'
               + '<% Y.Array.each( data.options, function(r){ %>'
               + '<option value="<%= r.value %>" <% (r.title) ? \'title="r.title"\' :  %>><%= r.text %></option>'
               + '<% },this); %>'
               + '</select>'

       },

       // Listeners applied to this cell editor's View instance ...
       after: {

           //--------
           //  After the editor view instance is created,
           //    set a "change" listener on the SELECT element
           //--------
           editorCreated: function(){
               var cbox = this.overlay.get('contentBox');

               this._subscr.push(
                   cbox.delegate('change',function(e){
                       var val = e.currentTarget.get('value');

                       if(this._isZeroOr(val)) {
                           this.saveEditor(val);
                       }

                   },'select', this)
               );
           },

           //--------
           //  After the editor is displayed,
           //    update the currently selected OPTION based on the o.value
           //--------
           editorShow : function(o){
               var sel   = this.overlay.get('contentBox').one('.myselect'),
                   sopts = sel.get('options'),
                   val   = o.value || this.get('value'),
                   sopt;

               sopts.some(function(n){
                   if(n && n.get('value') == val) {  // not a === check, to account for mixed vars
                       sopt = n;
                       return true;
                   }
               });

               if(sopt) {
                   sopt.set('selected',true);
               }

           }
       }

   };

PLEASE NOTE: All other attributes from the BaseViewClass apply and can be included within the editorConfig object.

DEBUGGING

If your SELECT box contains "[object Object]" you probably forgot to define propValue and propText.