How to Cycle Through ArrayCollection?

Question

I have two datagrids and would like to move items from on datagrip and populate the other.  Here is a screen shot for a visual.
In the screenshot about I can add names/sex to the datagrid on the left by using the text entry and Add button.  I can select the check boxes for each name ros as well. What I want to do is move the check names in the datagrid on the left to the datagrid on the right.  4 max.  But if I only selected 2 name, two names would be added to the Racer 1 and Racer 2. Racer 3 and Race 4 would be left empty.  If I check new names and submitted them it would go into a new row on the left datagrid.
What I can figure out is how to cycle through the left datagrid and find only the check rows.  Adding them to the right datagrid is easy enough as soon as I figure how to identify what is checked and what is not checked.
Here is the datagrid on the right.
<mx:DataGrid x="10" y="76" height="337" id="roster" editable="false" dataProvider="{rosterArray}">
<mx:columns>
<mx:DataGridColumn headerText="" width="30">
   <mx:itemRenderer>
      <mx:Component>
         <mx:CheckBox />
      </mx:Component>
   </mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="name" width="200" editable="false" />
<mx:DataGridColumn headerText="Sex" dataField="sex" width="40" editable="false" />
<mx:DataGridColumn headerText="Time" dataField="time" width="45" editable="false" />
</mx:columns>
</mx:DataGrid>
The function to add to my rosterArray (left datagrid) is below.
private function rosterAdd():void
     rosterArray.addItem({name:addName.text,sex:sexGroup.selectedValue.toString()});
     addName.text = ""; // empty the text entry field.
I guess I need to cycle through the datagrid and not the rosterArray since I don't have a place for the check marks in the rosterArray.
Any help idetifying what rows are checked in the left data grid would be much appreciated.
Thanks.

Answer 1

This code is not production-level, but it should answer your question.
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable] private var rosterArray:ArrayCollection = new ArrayCollection();
      [Bindable] private var eventArray:ArrayCollection = new ArrayCollection();
      public var num:uint = 0;
      public function processRoster():void{
        eventArray = new ArrayCollection();
        var cnt:uint = 1;
        var race:Object = new Object();
        for each(var obj:Object in rosterArray){
          if(obj.selected){
            switch(cnt++){
              case 1:
                race["col1"] = obj.name;
                break;
              case 2:
                race["col2"] = obj.name;
                break;
              case 3:
                race["col3"] = obj.name;
                break;
              case 4:
                race["col4"] = obj.name;
                continue;
                break;
        eventArray.addItem(race);         
      private function addParticipant():void{
        rosterArray.addItem({selected: false, name: participant.text, sex: gender.selectedValue, time: null});
        participant.text = "";
        male.selected = true;
      private function removeSelected(evt:MouseEvent):void{
    ]]>
  </mx:Script>
  <mx:RadioButtonGroup id="gender"/>
  <mx:Panel layout="horizontal" backgroundColor="0xFFFFFF"
    borderColor="0x663300" title="Events" color="0xFFFFFF"
    horizontalGap="50">
    <mx:VBox horizontalAlign="right" color="0x000000" paddingBottom="10"
      paddingLeft="10" paddingRight="10" paddingTop="10">
      <mx:Label text="Event Roster" fontWeight="bold" fontSize="14"
        width="100%" textAlign="left"/>
      <mx:HBox width="{roster.width}">
        <mx:TextInput id="participant" width="100%"/>
        <mx:RadioButton id="male" label="M" groupName="gender" selected="true"/>
        <mx:RadioButton id="female" label="F" groupName="gender"/>
        <mx:Button label="Add" click="addParticipant()"/>
      </mx:HBox>
      <mx:DataGrid x="10" y="76" height="337" id="roster" editable="false" dataProvider="{rosterArray}">
        <mx:columns>
          <mx:DataGridColumn headerText="" width="30">
            <mx:itemRenderer>
              <mx:Component>
                <mx:Canvas>
                  <mx:CheckBox id="ckbx" selectedField="selected" change="onChange(event);"
                    label="" horizontalCenter="0">
                    <mx:Script>
                      <![CDATA[
                        import mx.controls.Alert;
                        private function onChange(evt:Event):void {
                          if(Boolean(data.selected) == false && outerDocument.num < 4){
                            outerDocument.num++;
                            data.selected = !data.selected;
                            outerDocument.processRoster();
                          }else if(Boolean(data.selected) == true){
                            outerDocument.num--;
                            data.selected = !data.selected;
                            outerDocument.processRoster();
                          }else{                           
                            mx.controls.Alert.show("Maximum of 4 participants can be selected.");
                            ckbx.selected = false;
                      ]]>
                    </mx:Script>
                  </mx:CheckBox>
                </mx:Canvas>
              </mx:Component>
            </mx:itemRenderer>
          </mx:DataGridColumn>
          <mx:DataGridColumn headerText="Name" dataField="name" width="200" editable="false" />
          <mx:DataGridColumn headerText="Sex" dataField="sex" width="40" editable="false" />
          <mx:DataGridColumn headerText="Time" dataField="time" width="45" editable="false" />
        </mx:columns>
      </mx:DataGrid>
      <mx:Button label="Remove Selected" fontSize="14" click="removeSelected(event)"/>
    </mx:VBox> 
    <mx:VBox horizontalAlign="right" color="0x000000" paddingBottom="10"
      paddingLeft="10" paddingRight="10" paddingTop="10">
      <mx:Label text="Races" fontWeight="bold" fontSize="14"
        width="100%" textAlign="left"/>
      <mx:DataGrid x="393" y="43" id="eventRace" dataProvider="{eventArray}" width="337" height="365">
        <mx:columns>
          <mx:DataGridColumn headerText="Racer 1" dataField="col1"/>
          <mx:DataGridColumn headerText="Racer 2" dataField="col2"/>
          <mx:DataGridColumn headerText="Racer 3" dataField="col3"/>
          <mx:DataGridColumn headerText="Racer 4" dataField="col4"/>
        </mx:columns>
      </mx:DataGrid>
      <mx:Button label="Remove Selected" fontSize="14" click="removeSelected(event)"/>
    </mx:VBox>
  </mx:Panel>
</mx:Application>