How to: RadioButton in custom DataGridColumn ItemRenderer in AS3

I have a datagrid that I want to add a column of radio button using AS3 (instead of mxml). I was able to do this with a custom itemRenderer.

var dgc:DataGridColumn = new DataGridColumn();
dgc.itemRenderer = new ClassFactory(com.mypackage.RadioBtnColumnItemRenderer);

In my RadioBtnColumnItemRenderer.mxml, I have a box with a radioButton... like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Box 
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="middle"
>
<mx:RadioButton id="btnRadio"
   groupName="btnRadioSelect"
/>
</mx:Box>

When I run the application, the radio button shows up in the column as it should. However, I cannot select just ONE of the radio buttons. I am able to select all of them, but I don't want this... I want the ability to select one, and then if I select another one, then the first one is unselected and the current one becomes selected (just like you would expect radio buttons to work).

W开发者_运维技巧hat am I missing?

You're actually pretty close. You just need to pass the reference to the group into the class factory using the "properties" property.

var dgc:DataGridColumn = new DataGridColumn();
var ir: = new ClassFactory(com.mypackage.RadioBtnColumnItemRenderer);
var radioGroup:RadioButtonGroup = new RadioButtonGroup(this);
ir.properties = {radioGroup:radioGroup}; //THIS IS KEY
dgc.itemRenderer = ir;

Now in the renderer you need that property set somewhere like this.

<mx:Script>
    [Bindable]
    public var radioGroup:RadioButtonGroup; 
</mx:Script>
<mx:RadioButton id="btnRadio"  group="{radioGroup}"  />

You'll need to define a RadioButtonGroup to have this select only one behavior. I think if you put this group in the item renderer, you won't be able to achieve the desired behavior though, so you may need to figure out a way to reference the group from the container holding the data grid.

http://livedocs.adobe.com/flex/3/langref/mx/controls/RadioButtonGroup.html