Bouton radio dans DataGrid pour sélectionner la ligne entière

Question

J'ai une Datagrid en Flex. J'ai besoin d'ajouter un bouton radio dans la première colonne de telle sorte que lorsque je sélectionne ce bouton radio, la ligne entière doit être sélectionnée. J'ai essayé d'utiliser le code suivant -

<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> 

Mais il y a des problèmes suivants - 1) Il me permet de sélectionner plusieurs boutons. 2) Si je clique n'importe où sur la ligne, la ligne est sélectionnée. Ce comportement n'est pas attendu. Si devrait être sélectionné uniquement lorsque je sélectionne le bouton radio.

S'il vous plaît aidez-moi à ce sujet. :)

Answer 1

Il me permet de sélectionner plusieurs boutons

Parce que ces boutons radio, étant rendus d'élément en baisse, appartiennent à des groupes différents boutons-radio dans différents composants. Ecrivez une méthode dans la classe parente (qui contient le DataGrid) qui prend rowIndex en entrée et sélectionne la ligne en conséquence et désélectionne explicitement tous les autres boutons radio. Vous pouvez appeler cette méthode à partir du bouton radio déroulant dans l'utilisation outerDocument.methodName(listData.rowIndex)

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

Si je clique nulle part ailleurs sur la ligne, la ligne est sélectionnée obtenir. Ce comportement n'est pas attendu.

Ceci est le comportement par défaut de DataGrid - comme cela a déjà suggéré, vous devrez passer par le code DataGrid, déterminer la partie où la sélection se produit, et remplacer cette méthode. Il est possible que ce comportement soit implémenté dans une classe de base de DataGrid comme ListBase.

Answer 2

Voici un autre solution avec exemple de travail. Si vous n'utilisez pas de données XML, vous ne pourrez pas utiliser parent(). Utilisez à la place outerDocument.dg.dataProvider, où dg est l'ID de votre 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>