Radiogroups and Datagrids

Question

I am trying to have a radio group for each line of data. The
choice is either "yes" or "no". For instance.
Datagrid
Name Send Email?
Mike ( * ) Yes ( ) No
John ( * ) Yes ( ) No
Al ( ) Yes ( * ) No
I have tried creating ItemRenderers for this, but all I can
do is get a radiobutton that spans the column, i.e., you can only
select one item in the column for the radio button.
<mx:RadioButtonGroup id="radiogroup1"/>
<mx:DataGridColumn dataField="email" editable="true"
editorDataField="selected" rendererIsEditor="true">
<mx:itemRenderer>
<mx:Component>
<mx:RadioButton groupName="radiogroup1" label="yes">
</mx:RadioButton>
</mx:Component>
</mx:itemRenderer>
This code doesn't work since I need 2 radio button choices on
each row, and selecting between the two instead of across the
column.
I could do this easily in HTML. Is it possible in Flex? Or
perhaps someone could recommend a better approach to this problem?
Thank you,
Mike

Answer 1

try this example
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable]
public var arrColl:ArrayCollection = new ArrayCollection();
public function init():void
arrColl.addItem({name:"Jan1", sendmail:'No'});
arrColl.addItem({name:"Jan2", sendmail:'No'});
arrColl.addItem({name:"Jan3", sendmail:'No'});
arrColl.addItem({name:"Jan4", sendmail:'No'});
arrColl.addItem({name:"Jan5", sendmail:'No'});
public function alertArrColl():void
var str:String = "";
for(var cnt:int = 0 ; cnt<arrColl.length ; cnt++)
str = str + arrColl.getItemAt(cnt).name + " " +
arrColl.getItemAt(cnt).sendmail + '\n';
Alert.show(str);
]]>
</mx:Script>
<mx:Panel title="RadioButtonGroup Render In Datagrid
Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10">
<mx:DataGrid width="358" height="209"
dataProvider="{arrColl}">
<mx:columns>
<mx:DataGridColumn headerText="Send Email"
dataField="name">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalGap="3">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ItemClickEvent;
private function handleCard(event:ItemClickEvent):void {
data.sendmail = sendOption.selectedValue;
]]>
</mx:Script>
<mx:Label width="100%" color="blue"
text="{data.name}"/>
<mx:RadioButtonGroup id="sendOption"
itemClick="handleCard(event);"/>
<mx:RadioButton groupName="sendOption" id="yes"
value="Yes" label="Yes" />
<mx:RadioButton groupName="sendOption" id="no" value="No"
label="NO" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Alert arrColl"
click="alertArrColl()"/>
</mx:Panel>
</mx:Application>
Thanks,
Amol