Using a DropDownList in a DataGrid, both with dynamically loaded content

Question

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  xmlns:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx"
                         xmlns:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>

Answer 1

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  xmlns:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx"
                         xmlns:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>