actionscript 3 - DataGrid itemrenderer getting issue while scroll

Question

I am using radio button inside spark datagrid as following way.

<s:DataGrid dataProvider="{arrList}" >
<s:columns>
<mx:ArrayList>
<mx:source>
    <s:GridColumn width="90" headerText="radio">
     <s:itemRenderer >
     <fx:Component>
        <s:GridItemRenderer>
                <fx:Script>
                <![CDATA[
                    override public function set data( value:Object ) : void 
                    {
                        super.data = value;
                        rdId.group=outerDocument.rbgGroup;
                    }
                ]]>
                </fx:Script>
          <s:RadioButton id="rdId" />
        </s:GridItemRenderer>
        </fx:Component>
        </s:itemRenderer>
    </s:GridColumn>

     <s:GridColumn headerText="Name" dataField="name" />
    </mx:source>
  </mx:ArrayList>
</s:columns>
</s:DataGrid>

I have created group for radiobutton as i want any one of selected.

<s:RadioButtonGroup id="rbgGroup" />

This working fine. But, if i select any radio like first and scroll then it will select another radio button automatically and first selected removed.

I have checked many other post like this but that doesn't seems work.

Issue occurred only when i scroll.
Any help would greatly appreciated.

Answer 1

More then likely this has to do with the virtual layout.

virtual and non-virtual:

The main difference between a virtual and non-virtual layout is how many renderers are created. A non-virtual layout creates a renderer for every item at startup, where virtual layouts only create renderers for items that are currently in view. This is a huge performance gain when you have dataProviders with thousands of items, but only a handful are shown at any given time. The spark Datagrid uses an layout that turns on virtual layout by default.

Unfortunately you cannot change this easily for Datagrids. A common solution is to store the selection state in the data and on the set data you already are overriding also set the selection state based on the data.

Per request in the comment a code sample:

 <s:GridItemRenderer>
     <fx:Script>
          <![CDATA[
                override public function set data( value:Object ) : void 
                {
                    super.data = value;
                    rdId.group=outerDocument.rbgGroup;

                    //just like you are setting the group, mark it as selected based on the data. 
                    //Update your data when it becomes selected.
                    rdId.selected = value.selected;
                }

                protected function rb_clickHandler(event:Event):void {
                    data.selected = rbId.selected;
                }
            ]]>
            </fx:Script>
      <s:RadioButton id="rdId" change="rdId_clickHandler(event)"/>
    </s:GridItemRenderer>