Question

I have a Datagrid in Flex. I need to add a radio button in first column such that when I select that radio button, entire row should get selected.
I have tried using following code –

<mx:DataGridColumn id="selectColumnRadioButton" sortable="false" textAlign="center" editable="false" width="18">
                         <mx:itemRenderer >
                              <mx:Component>
                                     <mx:RadioButton selected="false"/>
                                 </mx:Component>
                             </mx:itemRenderer>
              </mx:DataGridColumn>

But there are following problems –
1) It is allowing me to select multiple buttons.
2) If I click anywhere else on the row, then the row is getting selected. This is not expected behavior. If should get selected only when I select the radio button.

Please help me on this. 🙂

Answer 1

It is allowing me to select multiple buttons

Because those radio buttons, being drop-in item renderers, belong to different radio-button-groups in different components. Write a method in the parent class (that contains the DataGrid) which takes rowIndex as input and selects the row accordingly and explicitly deselects all other radio buttons. You can call that method from the drop-in radio button using outerDocument.methodName(listData.rowIndex)

<mx:itemRenderer >
  <mx:Component>
    <mx:RadioButton selected="false" 
      change="outerDocument.methodName(listData.rowIndex)"/>
  </mx:Component>
</mx:itemRenderer>

If I click anywhere else on the row, then the row is getting selected. This is not expected behavior.

This is the default behavior of DataGrid – as already suggested, you’ll have to go through the DataGrid code, figure out the part where selection happens, and override that method. It could be possible that this behavior is implemented in some base class of DataGrid like ListBase.