title: Creating a column of RadioButtons in Adobe Flex
body: <p>I'm using the AdvancedDataGrid widget and I want two columns to be radio buttons, where each column is it's own RadioButtonGroup.  I thought I had all the necessary mxxml, but I'm running into a strange behavior issue.  When I scroll up and down, the button change values!  The selected button becomes deselected, and unselected ones become selected.  Anyone have a clue about this bug?  Should I being going about this a different way. -- Here's a stripped down example of what I trying to do.</p>
  
  <pre><code>&lt;mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"&gt;
    &lt;mx:RadioButtonGroup id="leftAxisGrp" /&gt;
    &lt;mx:RadioButtonGroup id="rightAxisGrp"&gt;
      &lt;mx:change&gt;
        &lt;![CDATA[
          trace (rightAxisGrp.selection);
          trace (rightAxisGrp.selection.data.name);
        ]]&gt;
      &lt;/mx:change&gt;
    &lt;/mx:RadioButtonGroup&gt;
    &lt;mx:AdvancedDataGrid
        id="readingsGrid"
        designViewDataType="flat"
        height="150" width="400"
        sortExpertMode="true"
        selectable="false"&gt;
      &lt;mx:columns&gt;
        &lt;mx:AdvancedDataGridColumn
            headerText="L" width="25" paddingLeft="6"
            dataField="left" sortable="false"&gt;
          &lt;mx:itemRenderer&gt;
            &lt;mx:Component&gt;
              &lt;mx:RadioButton groupName="leftAxisGrp" /&gt;
            &lt;/mx:Component&gt;
          &lt;/mx:itemRenderer&gt;
        &lt;/mx:AdvancedDataGridColumn&gt;
        &lt;mx:AdvancedDataGridColumn
            headerText="R" width="25" paddingLeft="6"
            dataField="right" sortable="false"&gt;
          &lt;mx:itemRenderer&gt;
            &lt;mx:Component&gt;
              &lt;mx:RadioButton groupName="rightAxisGrp" /&gt;
            &lt;/mx:Component&gt;
          &lt;/mx:itemRenderer&gt;
        &lt;/mx:AdvancedDataGridColumn&gt;
        &lt;mx:AdvancedDataGridColumn headerText="" dataField="name" /&gt;
      &lt;/mx:columns&gt;
      &lt;mx:dataProvider&gt;
        &lt;mx:Array&gt;
          &lt;mx:Object left="false" right="false" name="Reddish-gray Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Golden-brown Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Northern Rufous Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Sambirano Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Simmons' Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Pygmy Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Brown Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Madame Berthe's Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Goodman's Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Jolly's Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Mittermeier's Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Claire's Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Danfoss' Mouse Lemur" /&gt;
          &lt;mx:Object left="false" right="false" name="Lokobe Mouse Lemur" /&gt;
          &lt;mx:Object left="true" right="true" name="Bongolava Mouse Lemur" /&gt;
        &lt;/mx:Array&gt;
      &lt;/mx:dataProvider&gt;
    &lt;/mx:AdvancedDataGrid&gt;
  &lt;/mx:WindowedApplication&gt;
  </code></pre>
  
  <hr>
  
  <p><em>UPDATED</em> (thanks bill!)</p>
  
  <p>Alright! Go it working.  I just had to make a couple of changes from bill's suggestion.  Mainly using ArrayCollection with ObjectProxy so it was both bindable and dynamic.  One weird thing - I couldn't select a button in the first row if I filled in the array at construction time; I had to delay that until the creationComplete event was fired (which is fine, since I'm going to populate the grid from a db anyway).</p>
  
  <pre><code>&lt;mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"&gt;
    &lt;mx:Script&gt;
      &lt;![CDATA[
        import mx.utils.ObjectProxy;
        import mx.collections.ArrayCollection;
  
        [Bindable]
        private var myData:ArrayCollection = new ArrayCollection ();
  
        private function selectItem (selObject:Object, property:String) : void
        {
          for each (var obj:ObjectProxy in myData) {
            obj[property] = (obj.name === selObject.name);
          }
          readingsGrid.invalidateDisplayList ();
        }
      ]]&gt;
    &lt;/mx:Script&gt;
    &lt;mx:RadioButtonGroup id="leftAxisGrp"&gt;
      &lt;mx:change&gt;
        &lt;![CDATA[
          selectItem (leftAxisGrp.selectedValue, 'left');
        ]]&gt;
      &lt;/mx:change&gt;
    &lt;/mx:RadioButtonGroup&gt;
    &lt;mx:RadioButtonGroup id="rightAxisGrp"&gt;
      &lt;mx:change&gt;
        &lt;![CDATA[
          selectItem (rightAxisGrp.selectedValue, 'right');
        ]]&gt;
      &lt;/mx:change&gt;
    &lt;/mx:RadioButtonGroup&gt;
    &lt;mx:AdvancedDataGrid
        id="readingsGrid"
        designViewDataType="flat"
        dataProvider="{myData}"
        sortExpertMode="true"
        height="150" width="400"
        selectable="false"&gt;
      &lt;mx:columns&gt;
        &lt;mx:AdvancedDataGridColumn id="leftCol"
            headerText="L" width="25" paddingLeft="6" sortable="false"&gt;
          &lt;mx:itemRenderer&gt;
            &lt;mx:Component&gt;
              &lt;mx:RadioButton groupName="leftAxisGrp"
                  buttonMode="true" value="{data}" selected="{data.left}" /&gt;
            &lt;/mx:Component&gt;
          &lt;/mx:itemRenderer&gt;
        &lt;/mx:AdvancedDataGridColumn&gt;
        &lt;mx:AdvancedDataGridColumn id="rightCol"
            headerText="R" width="25" paddingLeft="6" sortable="false"&gt;
          &lt;mx:itemRenderer&gt;
            &lt;mx:Component&gt;
              &lt;mx:RadioButton groupName="rightAxisGrp"
                  buttonMode="true" value="{data}" selected="{data.right}" /&gt;
            &lt;/mx:Component&gt;
          &lt;/mx:itemRenderer&gt;
        &lt;/mx:AdvancedDataGridColumn&gt;
        &lt;mx:AdvancedDataGridColumn headerText="" dataField="name" /&gt;
      &lt;/mx:columns&gt;
      &lt;mx:creationComplete&gt;
        &lt;![CDATA[
        myData.addItem(new ObjectProxy ({ left:true, right:true, name:"Golden-brown Mouse Lemur" }));
        myData.addItem(new ObjectProxy ({ left:false, right:false, name:"Reddish-gray Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Northern Rufous Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Sambirano Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Simmons' Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Pygmy Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Brown Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Madame Berthe's Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Goodman's Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Jolly's Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Mittermeier's Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Claire's Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Danfoss' Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Lokobe Mouse Lemur" }));
        myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Bongolava Mouse Lemur" }));               
        ]]&gt;
      &lt;/mx:creationComplete&gt;
    &lt;/mx:AdvancedDataGrid&gt;
  &lt;/mx:WindowedApplication&gt;
  </code></pre>