Radio button renderer in a datagrid

Using a radio button as a data grid cell renderer is an example of a more complex usage of data grid cell renderers. This is one way to achive this in a not very complicated way:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
 <![CDATA[
 public var dp:XML = <users>
 <user>
 <name>one</name>
 <main>true</main>
 </user>
 <user>
 <name>two</name>
 <main>false</main>
 </user>
 <user>
 <name>tre</name>
 <main>false</main>
 </user>
 </users>;
 ]]>
 </mx:Script>
 <mx:VBox>
 <mx:DataGrid dataProvider="{dp.user}" width="400">
 <mx:columns>
 <mx:DataGridColumn headerText="Name" dataField="name"/>
 <mx:DataGridColumn headerText="Main">
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox horizontalAlign="center">
 <mx:Script>
 <![CDATA[
 private function changeMain(event:Event):void{
 if(data.main == 'true'){
 //nothing
 data.main = 'true';
 }else{
 for each(var u:XML in (data as XML).parent().user){
 u.main = 'false';
 }
 data.main = 'true';
 }
 }
 ]]>
 </mx:Script>
 <mx:RadioButton click="changeMain(event)"  selected="{(data.main == 'true')}"/>
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn headerText="Main value" dataField="main"/>
 </mx:columns>
 </mx:DataGrid>
 </mx:VBox>
</mx:Application>

And the example in action:

[flash http://www.len.ro/hidden/flex/testRadioRenderer/TestRadioRenderer.swf w=400 h=200]

One Response

  1. […] Using a radio button as a data grid cell renderer is an example of a more complex usage of data grid cell renderers. Go here to see the original: Radio button renderer in a datagrid […]

Leave a Reply

*