title: Using RadioButton with RadioButtonGroup in a DataGridColumn (in a quiz application)
body: <p>I am having some issues to properly use several RadioButton components along with a RadioButtonGroup in my quiz application (when they are rendered via ItemRenderer under DataGridColumn).</p>
  
  <p>The quiz page displays a question along with 4 possible answers which represented by RadioButton components (tied with a unique RadioButtonGroup). A quiz usually contains many multiple choice questions.</p>
  
  <p>Everything works fine until I navigate to the next question and return to the previous question; then I could see my former answer selection in the radio button although when I change my answer and select a different radio button it keeps my old selection and add the new one, which is entirely unreasonable (since RadioButtonGroup should enforce selection of one option only). </p>
  
  <p>Here is how I define the DataGridColumn:</p>
  
  <pre><code>&lt;mx:DataGrid y="141" height="373" dataProvider="{currentQuestion.answers}" id="answersGrid" visible="false"  styleName="NoStyleDataGrid" useRollOver="false" headerHeight="0" width="381" x="461" variableRowHeight="true"&gt;           
            &lt;mx:columns&gt;                                
              &lt;mx:DataGridColumn  width="20" dataField="key"&gt;
                  &lt;mx:itemRenderer&gt;
                        &lt;mx:Component&gt;
                          &lt;mx:Canvas width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off" top="0"&gt;
                              &lt;mx:Script&gt;
                                  &lt;![CDATA[
                                      import mx.core.Application;
                                  ]]&gt;
                              &lt;/mx:Script&gt;
  
                              &lt;mx:RadioButton id="rb" value="{data.number}" selected="{outerDocument.isSelected(data.number,rb)}"  group="{outerDocument.getGroup()}" click="outerDocument.setAnswerState(event,data.number)" width="100%" height="30" x="12" y="0" /&gt;                                
  
                          &lt;/mx:Canvas&gt;                                    
                        &lt;/mx:Component&gt;
                  &lt;/mx:itemRenderer&gt;
              &lt;/mx:DataGridColumn&gt;
  </code></pre>
  
  <p>I make sure each question has its own unique Group to contain the RadioButton components (as answers) using this code:</p>
  
  <pre><code>        public function getGroup():RadioButtonGroup{                
              if(radioGroupMap[currentQuestion.key]!=null){                                       
                  return radioGroupMap[currentQuestion.key] as RadioButtonGroup;                                      
              }                               
              radioGroupMap[currentQuestion.key] = new RadioButtonGroup();
              return radioGroupMap[currentQuestion.key] as RadioButtonGroup;
          }
  </code></pre>
  
  <p>This code works fine as long as I do not go to the next question and return to the previous one.</p>
  
  <p>Appreciate any help on this issue.</p>
  
  <p>Thanks!</p>