In Part 1 (CFDJ, Vol. 8, issue 10) we introduced the destination-aware grid, formatters, and renderers. In this article we are continuing our discussion about datagrid renderers and...

RadioButtonGroupBox as Drop-In Renderer
We can apply similar techniques to RadioButton controls. The following code snippet suggests how the group of RadioButton controls can be used as a drop-in item renderer (and editor). Instead of an onValue/offValue pair, we are introducing an array of options (we could have gone further and upgraded <fx:options> to <fx:dataProvider>, which is similar to the ButtonBar and LinkBar controls):

<fx:DataGridColumn dataField="STATUS" width="300" headerText="Status" rendererIsEditor="true"
itemRenderer="com.theriabook.containers.RadioButtonGroupBox">
   <fx:options>
     <mx:Array id="options">
       <mx:Object data="A" label="Active"/>
       <mx:Object data="T" label="Terminated"/>
       <mx:Object data="L" label="On leave"/>
     </mx:Array>
   </fx:options>
</fx:DataGridColumn>

To support this use case, we need to build the renderer class and make the DataGridColumn pass it the array of options. The latter can be done by adding the following options setter to our DataGridColumn:

package com.theriabook.controls.dataGridClasses{
. . . . .
   public class DataGridColumn extends mx.controls.dataGridClasses.DataGridColumn {
   . . . . .
public function set options(val:Array):void {
    if (itemRenderer) UIClassFactory(itemRenderer).properties = {options:val};
    }
   }
}

Now let's build the renderer. By definition, to be an item renderer, the component has to implement the IListItemRenderer interface. To qualify as drop-in, a component has to additionally implement IDropInListItemRenderer. The Standard CheckBox implements both interfaces. Because of that, when we extended CheckBox in the previous article, we did not have to mention a single implementation and just merrily used data and listData at our convenience.

This is not the case now. Had RadioButtonGroup been at least a UIComponent, we'd need to implement the IDataRenderer and IDropInListItemRenderer interfaces and be done. But RadioButtonGroup is not even a DisplayObject, so we will base our renderer on mx.containers.Box with RadioButtonGroup embedded:

   private var group:RadioButtonGroup=null ;

   public function RadioButtonGroupBox() {
   super();
   group = new RadioButtonGroup();
}

Having RadioButtonGroup is just the beginning. Whenever our component gets assigned any options, we need to translate them into a set of RadioButton controls.

Each RadioButton will be added as a child of the renderer (container):

private var _options:Array=null;
public function set options(opt:Array):void {
   var i:int;
   . . . .
   _options=opt;
   for (i= 0; i < opt.length; i++) {
     var rb:RadioButton = new RadioButton();
     rb.label = opt[i].label;
     rb.value = opt[i].data;
     addChild(rb);
   }
}

override public function addChild(child:DisplayObject):DisplayObject {
   if (child is RadioButton) {
     (child as RadioButton).group = group;
     group.addInstance(child as RadioButton);
   }
   return super.addChild(child);
}
}

Please note how subscribing a RadioButton to the group is delegated to the overridden method addChild():

(child as RadioButton).group = group;
group.addInstance(child as RadioButton);

Had we done it directly in the options setter, there wouldn't be any need in addChild(). Why did we take the convoluted way? We did it to enable the potential use of RadioButtonGroupBox as a regular container, outside of the renderer context. In other words, no matter how a RadioButton gets added to the component - via options or not - it will get associated with the group.

Next, since we want the component to be a drop-in renderer, we need to implement the IDropInListItemRenderer interface so that the extra information about the hosting List is at our fingertips:

private var _listData:BaseListData=null;
public function get listData():BaseListData {
    return _listData;
}
public function set listData(value:BaseListData):void {
    _listData = value;
}

Once we have the listData, we can offer the following override of the data setter of IDataRenderer:

override public function set data(item:Object):void {
   super.data = item;
   if( item!=null ) {
     group.selectedValue = item[DataGridListData(listData).dataField];
   }
}

Similarly, while implementing the property value, we again consider both use cases: the standalone component and the item renderer. In case of the item renderer, our component updates the underlying data:

public function get value():Object {
   return group.selectedValue;
}
public function set value(v:Object) : void {
   group.selectedValue = v;
   if (listData) {
     data[DataGridListData(listData).dataField] = group.selectedValue;
   }
}

Finally, how about capturing the selection of a radiobutton? Since we need to listen to the change event on the RadioButtonGroup, we'll set up the listener right in the constructor method, handling the Event.CHANGE with the anonymous function:

public function RadioButtonGroupBox() {
   . . . .
   group = new RadioButtonGroup();
   group.addEventListener(Event.CHANGE,
     function event:Event):void {
     value = event.target.selectedValue;
     }
   );
}