ComboBox Selection to update a DataGrid..Please Help

programming flash
1

Hello I am very new to ActionScript and I’am trying to create a Flex Application where users can select courses from a combo box based on the department that offers the course. The combo box has an XML variable as its data provider and has the different departments listed. When a user selects the department from the combo box the courses offered for that department should automatically update (show up) in the data grid under their respective columns. What it needs to do is retrieve the XML for the selected department and then set the data provider for the srcgrid accordingly. I am having a lot of trouble with things displaying correctly in the data grid. The course should be under Course ID, course name under Name, etc… Thanks The XML and Code are below: Thanks


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.collections.XMLListCollection;
        import mx.collections.ArrayCollection;
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.rpc.events.ResultEvent;
    
private var courseList:XML =
<courses>
    <dept id="NYUC CS">
        <name>NYUC College Computer Science</name>  
        <course id="NYUC CS341">
            <name>Data Structures</name>
            <instructor>Miller</instructor>
            <day>Wednesday</day>
        </course> 

        <course id="NYUC CS701">
            <name>Advanced Web Application Development</name>
            <instructor>Keller</instructor>
            <day>Tuesday</day>
        </course>
    </dept>
    <dept id="CAS CS">
        <name>College of Arts and Sciences Computer Science</name>
        <course id="CAS CS105">
            <name>Databases</name>
            <instructor>Jones</instructor>
            <day>Monday</day>
        </course>
        <course id="CAS CS455">
            <name>Computer Networks</name>
            <instructor>Smith</instructor>
            <day>Thursday</day>
        </course>
    </dept>
</courses>;

    [Bindable]
    private var listings:XML = new XML; 
    
    private function addCourseToList(id:String,name:String,instructor:String,day:String):void
    {
        var newCourse:XML = 
          <course id={id}>
            <name>{name}</name>
            <instructor>{instructor}</instructor>
            <day>{day}</day>
          </course>;
        courseList.appendChild(newCourse);
    }
    private function closeHandler(event:Event):void {
        listings = event.target.selectedItem;
 }
]]>
</mx:Script>


<mx:Label text="Dept: "  x="275" y="69" height="20" fontWeight="bold"/>
    <mx:ComboBox x="323" y="67" width="99" id="cb" dataProvider="{courseList.dept}" labelField="@id"  change="closeHandler(event);" editable="true" enabled="true"></mx:ComboBox>
    <mx:Label text="Available Courses "  x="46" y="128" fontWeight="bold"/>
    
    <mx:DataGrid id="srcgrid" allowMultipleSelection="true" dragEnabled="true" 
        dropEnabled="true" dragMoveEnabled="true" x="46" y="154" width="352" 
        dataProvider="{listings}" height="156" editable="true" enabled="true">
        <mx:columns>
            <mx:DataGridColumn headerText="CourseID" dataField="@id"/>
            <mx:DataGridColumn headerText="CourseName" dataField="name" />
            <mx:DataGridColumn headerText="Instructor" dataField="instructor"/>
            <mx:DataGridColumn headerText="Day" dataField="day" />
        </mx:columns>
    </mx:DataGrid>
    <mx:Label text="Selected Courses "  x="404" y="128" fontWeight="bold"/>
    <mx:DataGrid id="destgrid" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true"
        dragMoveEnabled="true" x="404" y="154" width="352" height="156">
        <mx:columns>
            <mx:DataGridColumn headerText="CourseID" dataField="course"/>
            <mx:DataGridColumn headerText="CourseName" dataField="name"/>
            <mx:DataGridColumn headerText="Instructor" dataField="instructor"/>
            <mx:DataGridColumn headerText="Day" dataField="day"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:Button x="280" y="318" label="Reset" width="71"/>
    <mx:Button x="359" y="318" label="Drop" width="63"/>
    <mx:Button x="430" y="318" label="Submit" width="79"/>
    <mx:Label x="339" y="358" text="Selected Courses" fontSize="12" fontWeight="bold"/>

</mx:Application>