All radioButtons in a radioButtonGroup are selected

Question

Hello,

I have a list in a component mxml which is as follows:

        <s:VGroup>
            <s:Label text="TESTING" textDecoration="underline"/>
            <s:List id="recouvrementModulesList" itemRenderer="renderers.ListRenderer">
                <s:dataProvider>
                    <s:ArrayList>
                        <fx:String>Test</fx:String>
                                            <fx:String>Test2</fx:String>
                                            <fx:String>Test3</fx:String>
                    </s:ArrayList>
                </s:dataProvider>
            </s:List>
        </s:VGroup>

My ListRenderer itemrenderer is as follows:

    <?xml version="1.0" encoding="utf-8"?>
    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    autoDrawBackground="true">

        <fx:Script>
            <![CDATA[
            ]]>
        </fx:Script>


        <fx:Declarations>
            <mx:RadioButtonGroup id="rbg" />    
        </fx:Declarations>


        <s:HGroup horizontalAlign="center" verticalAlign="middle">
            <mx:RadioButton id="rb" group="{rbg}" label="{data}"/>
        </s:HGroup>

    </s:ItemRenderer>

Notice that the radiobutton in the itemrenderer belong to the group "rbg". In this example the List appears with 3 rows (hence 3 radioButtons on each row). However when I selected the radioButtons, each at a time, the selection is allowed to be done for all radioButtons. Logically if it belongs to a group, it should allow only 1 selection, but it is not the case.

Can anyone please help on this issue?

Thanks

Answer 1

Use set data method :

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
    <s:RadioButtonGroup id="rbg"/>
</fx:Declarations>

<s:VGroup>
    <s:Label text="TESTING" textDecoration="underline"/>
    <s:List id="recouvrementModulesList" >
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>Test</fx:String>
                <fx:String>Test2</fx:String>
                <fx:String>Test3</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:itemRenderer>
            <fx:Component>
                <mx:HBox>

                <fx:Script>
                    <![CDATA[
                        override public function set data( value:Object ) : void 
                        {
                            super.data = value;
                                rb.label=data.toString();
                                rb.group=outerDocument.rbg;
                        }

                    ]]>
                </fx:Script>

                    <s:RadioButton id="rb" />
                </mx:HBox>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:VGroup>

Answer 2

Try adding a name attribute to the radio button definition. Its omission could be causing the buttons to be treated individually and not as a single unit.