0 Replies Latest reply on Aug 3, 2011 12:48 AM by Michael Promotea

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

    Michael Promotea

      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:

       

       

      idnamedepartmentid
      1Janet Jackson2
      2Frank Zappa2
      3John Travolta1

       

       

      in another table I have the departments

       

       

      idDepartment
      1Acting Department
      2Music 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:

       

      1. Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
      2. Then I created an itemRenderer for departmentid
      3. 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>