Datagrid with RadioButtonGroup itemrenderer

Question

Hi There,

I don't know how to do this, tried several things now, so I will ask. The below shows what I want. I just don;t know how to get it working.

I have an AC with several questions and assoicated answers. These must be shown in a DG, and the idea is that the rows and colums of the DG are bound to the AC. For example, if the answer to question1 is Yes, the Yes-button must be true, and both the others must be false (as in normal radiobuttongroup behaviour). But when I change a button by clicking it, the actions datafield of the AC should change accordingly. Am I clear enough here?

It is ment for dynamic questionnaires. Any help is highly appreciated.

<?xml version = "1.0"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"&gt;
    <mx:Script>
     <![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      public var questions : ArrayCollection = new ArrayCollection([
       { question: 'Question 1', anwer: 'Yes' },
       { question: 'Question 2', anwer: 'No' },
       { question: 'Question 3', anwer: 'Unknown' }, ]);
     ]]>
    </mx:Script>

    <mx:Panel title = "Questionaire example" height = "100%" width = "100%" paddingTop = "10"
        paddingLeft = "10" paddingRight = "10">

     <mx:DataGrid id = "dg" width = "100%" height = "100%" dataProvider = "{questions}">
      <mx:columns>
       <mx:DataGridColumn dataField = "question" headerText = "Questions"/>
       <mx:DataGridColumn width = "80" textAlign = "center" editable = "false"
              headerText = "Yes">
        <mx:itemRenderer>
         <mx:Component>
          <mx:HBox horizontalAlign = "center" verticalAlign = "middle">
           <mx:RadioButton/>
          </mx:HBox>
         </mx:Component>
        </mx:itemRenderer>
       </mx:DataGridColumn>
       <mx:DataGridColumn width = "80" textAlign = "center" editable = "false"
              headerText = "No">
        <mx:itemRenderer>
         <mx:Component>
          <mx:HBox horizontalAlign = "center" verticalAlign = "middle">
           <mx:RadioButton/>
          </mx:HBox>
         </mx:Component>
        </mx:itemRenderer>
       </mx:DataGridColumn>
       <mx:DataGridColumn width = "80" textAlign = "center" editable = "false"
              headerText = "Unknown">
        <mx:itemRenderer>
         <mx:Component>
          <mx:HBox horizontalAlign = "center" verticalAlign = "middle">
           <mx:RadioButton/>
          </mx:HBox>
         </mx:Component>
        </mx:itemRenderer>
       </mx:DataGridColumn>
      </mx:columns>
     </mx:DataGrid>


    </mx:Panel>
</mx:Application>

Answer 1

the ToggleButtonBar is a lot easier to use than a RadioButton and it's functionally the same component (set the selectedIndex -- only one can be selected at a time).

Instead of putting each radio button in its own column, just put the ToggleButtonBar in one column.

Answer 2

Not sure what you are referring to when you talk of the 'actions' datafield:

'But when I change a button by clicking it, the actions datafield of the AC should change accordingly.'

What do you want to happen when 'Yes' is clicked for Question 1?

to set data in itemrenderers override the set data function and all data for the row will be present in the value object when that renderer initializes