Popup Cell Editor "radio"

This View configuration is used to setup a group of INPUT[type=radio] controls within the view's Overlay

Basic Usage

   // Column definition via Array options
   { key:"size", editor:"radio",
     editorConfig:{
       radioOptions:[ {value:0, text:"S"}, {value:1, text:"M"}, {value:2, text:"L"} ]
     }
   }
   // Column definition via Object type options
   { key:"size", editor:"radio",
     editorConfig:{
       radioOptions:{ S:"Small", M:"Medium", L:"Large" }
     }
   }

Standard Configuration

This editor creates a series of INPUT[radio] controls sequentially based upon the 'radioOptions' data, all with the same "name" so that it forms a radio group. A delegated "click" handler is setup at creation time to process the "checked" RADIO and save it's value.

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

   Y.DataTable.EditorOptions.radio = {
       BaseViewClass:  Y.DataTable.BaseCellPopupEditor,
       name:           'radio',

       // Define the template for the radio group ...
       templateObject: {

           // Template Handlebars version ...
        //  html: '<div class="myradios">'
        //       + ''
        //       + '</div>'

           // Template.Micro version
          html: '<div class="myradios ">' ////<%= this.classInput %>">'
               + '<% Y.Array.each( this.options, function(r) { %>  '
               + '<input type="radio" name="dt-editor-radio" '
               +     'value="<%= r.value %>" <% (r.title) ? \'title="r.title"\' :  %> /> <%= r.text %>'
               + '<% },this); %>'
               + '</div>'
       },

       // cell editor View instance listeners ...

       on: {

           //--------
           //  When editorCreated fires (at initialization),
           //    setup a listener to save changes based on INPUT[radio] 'click' events
           //--------
           editorCreated: function(){
               var cbox = this.overlay.get('contentBox');

               this._subscr.push(
                   cbox.delegate('click',function(e){
                       var tar = e.target,
                           val = tar.get('value');

                       if(this._isZeroOr(val)) {
                           this.saveEditor(val);
                       }
                   },'input[type="radio"]', this)
               );

           },

           //--------
           //  When the editor is displayed,
           //    update the "checked" INPUT[radio] within the group
           //--------
           editorShow : function(o){
               var chks  = this.overlay.get('contentBox').one('.myradios').all('input[type="radio"]'),
                   val   = o.value || this.get('value'),
                   valStr = Y.Lang.isString(val),
                   chk, rval;

               chks.each(function(n){
                   rval = (n && n.get) ? n.get('value') : null;
                   rval = (!valStr && /^\d*$/.test(rval) ) ? +rval : rval;
                   if(rval===val) {
                       chk = n;
                       return true;
                   }
                   n.set('checked',false);
               });

               if(chk) {
                   chk.set('checked',true);
               }
           }
       }
   };

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