ItemRendering issues

I face problem when i try to renderer the Radio buttons on FlexGrid,their behaviour is immature that when i click a related radio then other radio show response,which is not concerning to my routine.I use Repeater to handle this issue but still want a good solution in FlexGrid.

Please visit this link,may solve your problem

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html

regards,
anjum

To understand itemRenderers, you have to understand why they are what they are and what our intentions were when we designed them. By the way, when I say "we," I really mean the Adobe Flex engineering team. I had nothing to do with it. Anyway, suppose you have 1,000 records you want to show. If you think the list control creates 1,000 itemRenderers, you are incorrect. If the list is showing only 10 rows, the list creates about 12 itemRenderers—enough to show every visible row, plus a couple for buffering and performance reasons. The list initially shows rows 1–10. When the user scrolls the list, it may now be showing rows 3–12. But those same 12 itemRenderers are still there: no new itemRenderers are created, even after the list scrolls.

Here's what Flex does. When the list is scrolled, those itemRenderers that will still be showing the same data (rows 3–10) are moved upward. Aside from being in a new location, they haven't changed. The itemRenderers that were showing the data for rows 1 and 2 are now moved below the itemRenderer for row 10. Then those itemRenderers are given the data for rows 11 and 12. In other words, unless you resize the list, those same itemRenderers are reused—recycled—to a new location and are now showing new data.

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" />
<mx:DataGridColumn headerText="Author" dataField="author" width="125"/>
<mx:DataGridColumn headerText="Title" dataField="title">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
var today:Number = (new Date()).time;
var pubDate:Number = Date.parse(data.date);
if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
else setStyle("backgroundColor",0xffffff);
}
]]>
</mx:Script>
<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Note:
The outerDocument identifier changes the scope to look into the file, or outer document, with reference to the <mx:Component>. Now beware: the function has to be a public function, not a protected or private one. Remember that <mx:Component> is treated as an externally defined class.

Anjum bhai thanks for your nice effort,but i add radiobutton in Grid and wash extra coloumn because of only focus on problem which is multiple selection of radio.Iwant to block it.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:RadioButtonGroup id="rg"/>
<mx:DataGrid x="10" y="10" width="694" height="75" dataProvider="{book}" variableRowHeight="true" id="dg">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
override public function set data( value:Object ) : void
{
super.data = value;
rdo.selected = data.selectedInd;
}
private function show(e:Event):void
{
data.selectedInd=rdo.selected;
Alert.show("" + data.title);
}
]]>
</mx:Script>
<mx:RadioButton click="show(event)" group="{outerDocument.rg}" id="rdo"/>
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var book:ArrayCollection = new ArrayCollection();
private function init():void
{
for(var x:int = 0; x < 10; x++)
{
var obj:Object = new Object();
obj.title = "Title "+x;
obj.selectedInd = false;
book.addItem(obj);
}
}
]]>
</mx:Script>
</mx:Application>

please update ur code with this code snippet,hofefully it will resolve ur problem.
private function resetOtherBRadioButtons():void
{
for(var x:int = 0; x < book.length; x++)
{
book.getItemAt(x)["selectedInd"] = false;
}
}
//--------------------------------------------
private function show(e:Event):void
{
resetOtherBRadioButtons();
data.selectedInd=rdo.selected;
Alert.show("" + data.title);
}

thank u anjum bhai.this code is working properly and hit the related radio,no multiple selection now.''


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:RadioButtonGroup id="rg"/>
<mx:DataGrid x="10" y="10" width="694" height="75" dataProvider="{book}" variableRowHeight="true" id="dg">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
override public function set data( value:Object ) : void
{
super.data = value;
rdo.selected = data.selectedInd;
}
private function show(e:Event):void
{
resetOtherBRadioButtons();
data.selectedInd=rdo.selected;
Alert.show("" + data.title);
}
private function resetOtherBRadioButtons():void
{
for(var x:int = 0; x < outerDocument.book.length; x++)
{
outerDocument.book.getItemAt(x)["selectedInd"] = false;
}
}
]]>
</mx:Script>
<mx:RadioButton click="show(event)" group="{outerDocument.rg}" id="rdo"/>
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var book:ArrayCollection = new ArrayCollection();
private function init():void
{
for(var x:int = 0; x < 10; x++)
{
var obj:Object = new Object();
obj.title = "Title "+x;
obj.selectedInd = false;
book.addItem(obj);
}
}
]]>
</mx:Script>
</mx:Application>