Creating a column of RadioButtons in Adobe Flex

Question

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,

Answer 1

Reproduced this. Likely to be a ADG bug, we've run into a few here. (Didn't find this one on bugs.adobe.com, but their search sucks).

You could try Flex 3.0.3, or a nightly build here (warning, may be pretty broken), and see if they've fixed it, or you could try implementing a custom renderer, but that is a pain to get right.

Answer 2

What's happening here is that Flex only creates itemRenderer instances for the visible columns. When you scroll around, those instances get recycled. So if you scroll down, the RadioButton object that was drawing the first column of the first row may now have changed to instead be drawing the first column of the seventh row. Flex resets the "data" property of the itemRenderer whenever this happens.

So while there are 15 rows of data, there are only ever 12 RadioButtons (6 for the "left", and 6 for the "right" for the 6 visible rows), not 30 RadioButtons, as you might expect. This isn't a big problem if you're only displaying the selection, but it becomes more of a problem when you allow updates.

To fix the display issue, instead of setting the "dataField" on the column, you can bind the RadioButton's "selected" property to the itemRenderer's data.left (or right) value. You'll then need to make the items in your dataProvider "Bindable".

To fix the update issue, since you'd be binding directly to the dataProvider item values, you need to be sure to update them. Since there's isn't one RadioButton per-item, you'll need another scheme for that. In this case I put in a handler that goes and sets the left/right property of each item to "false", except for the "selected" one, which gets set to "true".

I updated your example code based on these thoughts. Try something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  layout="absolute"
    xmlns:my="*"
    xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:RadioButtonGroup id="leftAxisGrp"
       change="selectItem(leftAxisGrp.selectedValue, 'left');"/>
  <mx:RadioButtonGroup id="rightAxisGrp"
       change="selectItem(rightAxisGrp.selectedValue, 'right');">
  </mx:RadioButtonGroup>
  <mx:AdvancedDataGrid
      id="readingsGrid"
      designViewDataType="flat"
      height="150" width="400"
      sortExpertMode="true"
      selectable="false"
      dataProvider="{adgData.object}">
    <mx:columns>
      <mx:AdvancedDataGridColumn
          headerText="L" width="25" paddingLeft="6"
          sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="leftAxisGrp" 
                value="{data}" selected="{data.left}"/>
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn
          headerText="R" width="25" paddingLeft="6"
          sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="rightAxisGrp"
                value="{data}" selected="{data.right}"/>
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn headerText="" dataField="name" />
    </mx:columns>
  </mx:AdvancedDataGrid>
  <mx:Model id="adgData">
      <root>
        <object left="false" right="false" name="Reddish-gray Mouse Lemur" />
        <object left="false" right="false" name="Golden-brown Mouse Lemur" />
        <object left="false" right="false" name="Northern Rufous Mouse Lemur" />
        <object left="false" right="false" name="Sambirano Mouse Lemur" />
        <object left="false" right="false" name="Simmons' Mouse Lemur" />
        <object left="false" right="false" name="Pygmy Mouse Lemur" />
        <object left="false" right="false" name="Brown Mouse Lemur" />
        <object left="false" right="false" name="Madame Berthe's Mouse Lemur" />
        <object left="false" right="false" name="Goodman's Mouse Lemur" />
        <object left="false" right="false" name="Jolly's Mouse Lemur" />
        <object left="false" right="false" name="Mittermeier's Mouse Lemur" />
        <object left="false" right="false" name="Claire's Mouse Lemur" />
        <object left="false" right="false" name="Danfoss' Mouse Lemur" />
        <object left="false" right="false" name="Lokobe Mouse Lemur" />
        <object left="true" right="true" name="Bongolava Mouse Lemur" />
      </root>
  </mx:Model>
  <mx:Script>
    <![CDATA[
        private function selectItem(selObject:Object, property:String) : void {
            for each(var obj:Object in adgData.object) {
                obj[property] = (obj === selObject);
            }
            readingsGrid.invalidateDisplayList();
        }
    ]]>
  </mx:Script>
</mx:Application>