Skip navigation
Michael Promotea
Michael Promotea
Currently Being Moderated

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

Jul 28, 2011 12:17 AM

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

1534 Views   2 Replies   Latest reply: Michael Promotea, Jul 29, 2011 4:15 AM
 
Replies
  • e2dev
    Currently Being Moderated
    1. e2dev,
    Jul 28, 2011 10:30 AM   in reply to Michael Promotea
    Report

    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-427f401412c6 0d04dca-7ff3.html

     

    There is a code example there, too. HTHs.

     
    |
    Mark as:
  • Michael Promotea
    Currently Being Moderated
    2. Michael Promotea,
    Jul 29, 2011 4:15 AM   in reply to e2dev
    Report

    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>

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points