Creating a column of RadioButtons in Adobe Flex

Question

I am having an un-predictable behavior of creating radio buttons in advancedDataGrid column using itemRenderer. Similar kind of problem has been reported at http://stackoverflow.com/questions/112036/creating-a-column-of-radiobuttons-in-adobe-flex. I tried to use the same procedure i.e. bind every radio button selectedValue and value attributes with the property specified in the property of the associated bean but still facing the problem.

The button change values! The selected button becomes deselected, and unselected ones become selected.

Here is the code of my advancedDataGrid:

<mx:AdvancedDataGrid id="adDataGrid_rptdata" 
       width="100%" height="100%"
       dragEnabled="false" sortableColumns="false" 
       treeColumn="{action}"
       liveScrolling="false"
       displayItemsExpanded="true" >

       <mx:dataProvider>
              <mx:HierarchicalData source="{this.competenceCollection}" childrenField="competenceCriteria"/>
             </mx:dataProvider>

       <mx:columns>
        <mx:AdvancedDataGridColumn headerText="" id="action" dataField="criteriaName" />

        <mx:AdvancedDataGridColumn headerText="Periode 1" dataField="" width="200">
         <mx:itemRenderer>
          <mx:Component>
           <mx:HBox horizontalAlign="center" width="100%" verticalAlign="middle">         
            <mx:RadioButton name="period1" value="{data}" selected="{data.period1}" group="{data.radioBtnGrpArray[0]}" visible="{data.showRadioButton}" />
           </mx:HBox>
          </mx:Component>
         </mx:itemRenderer>
        </mx:AdvancedDataGridColumn>

        <mx:AdvancedDataGridColumn headerText="Periode 2" dataField="" width="200">
         <mx:itemRenderer>
          <mx:Component>
           <mx:HBox horizontalAlign="center" width="100%" verticalAlign="middle">         
            <mx:RadioButton name="period2" value="{data}" selected="{data.period2}" group="{data.radioBtnGrpArray[1]}" visible="{data.showRadioButton}" />
           </mx:HBox>
          </mx:Component>
         </mx:itemRenderer>
        </mx:AdvancedDataGridColumn>

        <mx:AdvancedDataGridColumn headerText="Periode 3" dataField="" width="200">
         <mx:itemRenderer>
          <mx:Component>
           <mx:HBox horizontalAlign="center" width="100%" verticalAlign="middle">         
            <mx:RadioButton name="period3" value="{data}" selected="{data.period3}" group="{data.radioBtnGrpArray[2]}" visible="{data.showRadioButton}" />
           </mx:HBox>
          </mx:Component>
         </mx:itemRenderer>
        </mx:AdvancedDataGridColumn>
       </mx:columns>
      </mx:AdvancedDataGrid>

Any work around is highly appreciated in this regard!

Answer 1

The selected button becomes deselected, and unselected ones become selected.

Is this problem occurring only for those radio buttons whose selected state was manually changed by the user? In that case it is because flex resets its selected state based on the value mentioned in the declaration when a RadioButton is reused. So even if you select/deselect a ratio button in the Periode 1 column, flex resets it to {data.period1} when you scroll away and come back. Making the column editable to save the modifications back to the data provider might work. Try changing the column declaration to:

<mx:AdvancedDataGridColumn headerText="Periode 1" dataField="" width="200" 
     editable="true" rendererIsEditor="true" editorDataField="selected">

EDIT: Try this - attempting to change the data provider when the radio button is selected. code written from memory and not tested - might contain bugs.

<mx:AdvancedDataGridColumn headerText="Periode 1" dataField="" width="200">
  <mx:itemRenderer>
    <mx:Component>
      <mx:HBox horizontalAlign="center" width="100%"
        verticalAlign="middle">
        <mx:RadioButton id="rb" name="period1" value="{data}" 
          selected="{data.period1}" 
          group="{data.radioBtnGrpArray[0]}" visible="{data.showRadioButton}" 
          change="outerDocument.handleRadio1(this);"/>
      </mx:HBox>
    </mx:Component>
  </mx:itemRenderer>
</mx:AdvancedDataGridColumn>
//in a script tag outside the datagrid.
public function handleRadio1(renderer:IListItemRenderer):void
{
  var index:Number = adDataGrid_rptdata.itemRendererToIndex(renderer);
  this.competenceCollection[i].period1 = renderer.rb.selected;
}