How to render repeated RadioButtons in Flex with DataGroup?

Question

<s:DataGroup id="group" dataProvider="{data}" >
  <s:itemRenderer>
    <s:RadioButton value="{group.currentItem}"/>
  </s:itemRenderer>
</s:DataGroup>

I'd like to render multiple RadioButton using DataGroup .

Problem 1: FlashBuilder displays an error: In initializer for 'itemRenderer', type spark.components.RadioButton is not assignable to target type 'mx.core.IFactory'.

Problem 2: group.currentItem is not defined. How can I get the actual item of the ArrayCollection data?

Answer 1

To use an inline itemRenderer you have to wrap the component inside a component declaration and an ItemRenderer like:

<s:DataGroup id="group" dataProvider="{dataProvider}" >
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <s:RadioButton value="{data}" label="{data.label}" selected="{data.value}"/>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

The spark ItemRenderer exposes a data property of type Object which holds the data for each item in your dataProvider.

It depends how your data actually looks like but for the example above it could be something like:

var dataProvider:ArrayCollection = new ArrayCollection([{label: 'item1', value: true}, {label: 'item2', value: false}]);

You might as well want to use another container for your items like a List for example, because a DataGroup would render each RadioButton on top of each other...