Переключатель в сетке данных для выбора всей строки

Question

У меня есть Datagrid в Flex. Мне нужно добавить переключатель в первый столбец, чтобы при выборе этого переключателя выбиралась вся строка. Я пытался использовать следующий код -

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

Но есть следующие проблемы - 1) Это позволяет мне выбрать несколько кнопок. 2) Если я щелкну где-нибудь еще в строке, то строка будет выделена. Это не ожидаемое поведение. Если должен быть выбран только тогда, когда я выбираю переключатель.

Пожалуйста, помогите мне в этом. :)

Answer 1

Это позволяет мне выбирать несколько кнопок

Поскольку эти радиокнопки, являющиеся модулями отображения выпадающих элементов, принадлежат разным группам радиокнопок в разных компонентах.Напишите метод в родительском классе (который содержит DataGrid), который принимает rowIndex в качестве входных данных и соответственно выбирает строку и явно отменяет выбор всех других переключателей.Вы можете вызвать этот метод из выпадающего переключателя, используя outerDocument.methodName(listData.rowIndex)

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

Если я щелкну где-нибудь еще в строке, то строка будет выделена.Это не ожидаемое поведение.

Это поведение по умолчанию DataGrid - как уже предлагалось, вам придется пройти через код DataGrid, выяснить, где происходит выбор, и переопределитьэтот метод.Вполне возможно, что это поведение реализовано в некотором базовом классе DataGrid, например ListBase.

Answer 2

Применение:

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

Answer 3

Вот еще одно решение с рабочим примером. Если вы не используете данные XML, вы не разрешите использовать parent (). Вместо этого используйте externalDocument.dg.dataProvider, где dg - это идентификатор вашей 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>