Radio button in datagrid for selecting the entire row

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.

Answer 2

Here is another solution with working example. If you are not using XML data, you will not allow to use parent(). Use outerDocument.dg.dataProvider instead, where dg is id for your DataGrid.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
 <![CDATA[
 public var dp:XML = <users>
 <user>
 <name>one</name>
 <main>true</main>
 </user>
 <user>
 <name>two</name>
 <main>false</main>
 </user>
 <user>
 <name>tre</name>
 <main>false</main>
 </user>
 </users>;
 ]]>
 </mx:Script>
 <mx:VBox>
 <mx:DataGrid dataProvider="{dp.user}" width="400">
 <mx:columns>
 <mx:DataGridColumn headerText="Name" dataField="name"/>
 <mx:DataGridColumn headerText="Main">
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox horizontalAlign="center">
 <mx:Script>
 <![CDATA[
 private function changeMain(event:Event):void{
 if(data.main == 'true'){
 //nothing
 data.main = 'true';
 }else{
 for each(var u:XML in (data as XML).parent().user){
 u.main = 'false';
 }
 data.main = 'true';
 }
 }
 ]]>
 </mx:Script>
 <mx:RadioButton click="changeMain(event)"  selected="{(data.main == 'true')}"/>
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn headerText="Main value" dataField="main"/>
 </mx:columns>
 </mx:DataGrid>
 </mx:VBox>
</mx:Application>

Answer 3

Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private static const SELECTED:String = "SELECTED";
private static const UNSELECTED:String = "UNSELECTED";
]]>
</mx:Script>
<mx:ArrayCollection id="arr">
<mx:Object label="User 1" data="1" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 2" data="2" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 3" data="3" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 4" data="4" count="4" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="5" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 6" data="6" count="0" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="7" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 8" data="8" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 9" data="9" count="4" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="10" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 11" data="11" count="4" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="12" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 13" data="13" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 14" data="14" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 15" data="15" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 16" data="16" count="0" state="{UNSELECTED}"/>
</mx:ArrayCollection>
        <mx:DataGrid x="161" y="197" id="dg1" verticalGridLines="false"  horizontalGridLines="true" horizontalGridLineColor="#cccccc"draggableColumns="true"  dataProvider="{arr}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" id="col1" width="150" itemRenderer="customRadio">
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Column 2" dataField="data" />
<mx:DataGridColumn headerText="Count" dataField="count"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Renderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:RadioButton xmlns:mx="http://www.adobe.com/2006/mxml" click="onRadioToggle()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var isSelected:Boolean;
private static const SELECTED:String = "SELECTED";
private static const UNSELECTED:String = "UNSELECTED";
override public function set data(value:Object):void {
super.data = value;
if(value){
//value.isSelected---> isSelected is temp var in dp, which wil keep track of
//whether it selected or not
//this.selected = value.selected;
if(value.state == SELECTED){
this.selected = true;
}
else{
this.selected = false;
}
}
}
private function onRadioToggle():void{
if(data.state == UNSELECTED)
{
data.state = SELECTED;
}
else{
data.state = UNSELECTED;
}
var arrObj:ArrayCollection = Object(this.owner.parent).arr ;
if(arrObj != null){
var len:int = arrObj.length;
for(var i:int = 0 ; i < len ; i++){
if(data.data != arrObj.getItemAt(i).data)
arrObj.getItemAt(i).state = UNSELECTED
}
}
}
]]>
</mx:Script>
</mx:RadioButton>