2 Replies Latest reply on Jul 29, 2011 4:15 AM by Michael Promotea

    How to create a datagrid with a DropDownList that is dynamically populated

    Michael Promotea Level 1

      I am struggling with this now for over a week and hope that someone can shed light on this for me. What I want is simple: I have an Employee table that I am listing in the DataGrid. In the field for the Department ID I would like to have a DropDownList that displays the name of the department (rather then the id) and be able to select another Department from the pop-up. This DropDownList needs to be populated dynamically, of course, so that it reflects any changes or additions in the department table.

       

      I consider this the most basic info that anyone needs when working with the datagrid, but somehow there is not a single tutorial that I could find about this (and quite frankly, this is a tutorial that absolutely belongs in the "Flex in a Week" series). I would greatly appreciate if someone could point me to such a tutorial or give me some advice how I create something like this in principal. Here is what I have done so far ... please correct me if there is something wrong with my approach:

       

      1. I created the datagrid, created a PHP Data Service and populated the DataGrid with the data from it
      2. I set the DataGrid to editable and the DepartmentID field to not editable (otherwise a click on the pop-up later might show a text field, which I don't want)
      3. For the DepartmentID field I created an itemRenderer
      4. I opened the itemRenderer and dragged a DropDownList on the area. Then I deleted the standard Textfield that is there in the itemRenderer and also commented out the code that came with it.
      5. Now I created a PHP Data Service for the Departments and dragged the getAllDepartments function on the DropDownList as DataProvider. So far, so good. When I run the application, the DataGrid is visible and when I click on it, all the available departments are in the DropDownList

       

      This is how far I have gotten. Where I am stuck is how I can make this DropDownList show the actual department of the current row. The second part I am struggling with is how the Employee Table is getting updated when I select a different department.

       

      Your help and advice is greatly appreciated. Thanks in advance ...

       

      Michael

        • 1. Re: How to create a datagrid with a DropDownList that is dynamically populated
          e2dev Level 2

          Hi Michael - sounds like you've done a nice job with your renderer.

           

          RE: showing the actual department for each row - You will probably need to add some logic to your renderer that sets the DropDownList control's selectedIndex property to the index of the item that contains the department you want to display.

           

          RE: updating your Employee table on your server - You will have to send the data from the Flex application back to your server. Did you use the value property of the item renderer to update the dataProvider with the new value from your dropdown list?

           

          Have you looked at using the ComboBoxGridItemEditor available in the DataGrid control? Search for that control on this help page:

           

          http://help.adobe.com/en_US/flex/using/WS0ab2a460655f2dc3-427f401412c60d04dca-7ff3.html

           

          There is a code example there, too. HTHs.

          1 person found this helpful
          • 2. Re: How to create a datagrid with a DropDownList that is dynamically populated
            Michael Promotea Level 1

            I am not getting anywhere with what I thought is the most simplest basic thing in the world. Can anyone please help?

             

            Attached is some very basic code and I would greatly appreciate, if someone could show me how I get it to work.

             

            I have a ArrayCollection "employees" which is used to fill a DataGrid. The department is listed as an Integer value. I would like to display however the name of the department, which is in a second ArrayCollection "departmentsArray". So the itemRenderer (which is not yet implemented in this code) needs to match the "idn" value with the "departmentid" value and then display the name of the department. However, when the user clicks on the DropDownLists and selects a new department, the departmentid value in the employee array needs to get updated too.

             

            Again ... your help is greatly appreciated.

             

            Michael

             

            <?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" minWidth="955" minHeight="600">
                 <fx:Declarations>
                      <!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
            
                 
                 </fx:Declarations>
                 <fx:Script>
                      <![CDATA[                
                           import mx.collections.ArrayCollection;
                           
                           [Bindable]
                           private var employees:ArrayCollection = new ArrayCollection([
                                {idn:1, firstname:'Lisa', lastname:'Tran', departmentid:1},
                                {idn:2, firstname:'Michael', lastname:'Orchard', departmentid:2},
                                {idn:3, firstname:'Wolfgang', lastname:'Prettyer', departmentid:2},
                                {idn:4, firstname:'Julia', lastname:'Stancau', departmentid:3},
                           ]);     
                           
                           [Bindable]
                           private var departmentsArray:ArrayCollection = new ArrayCollection([
                                {idn:1, department:'Video'},
                                {idn:2, department:'Web'},
                                {idn:3, department:'Print'},
                           ]); 
                      
                      ]]>
                 </fx:Script>
                 
                 <s:DataGrid x="57" y="90" width="410" requestedRowCount="4" dataProvider="{employees}">
                      <s:columns>
                           <s:ArrayList>
                                <s:GridColumn dataField="idn" headerText="ID"></s:GridColumn>
                                <s:GridColumn dataField="firstname" headerText="Vorname"></s:GridColumn>
                                <s:GridColumn dataField="lastname" headerText="Nachname"></s:GridColumn>
                                <s:GridColumn dataField="departmentid" headerText="Department"></s:GridColumn>
                           </s:ArrayList>
            
                      </s:columns>
                 
                      
                 </s:DataGrid>
            </s:Application>