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:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Related Posts with Thumbnails

Related posts:

  1. Mixing generated with mxml code The problem this example tries to solve is the following:...
  2. Karmic various tricks Logout messages If you are opening a terminal to a...
  3. Ubuntu Lucid Lynx There was not much I expected from the new ubuntu...
  4. Flex applications size optimization After quite some time of development we realised that our...

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