How do I use complex objects as dataproviders in the Spark DropDownList control?

Not yet rated

Tags:

Problem

The Flex docs cover the basics of the DropDownList, but do not show examples that use complex objects. Specifically, I would like to see an example that shows a label field and a data field, so that the DropDownList displays the contents of the label field but has the data field available in its event handler for processing.

Solution

Use the labelField property of the DropDownList to designate the field that should be used for display in the DropDownList. Use the selectedItem property to access all the data.

Detailed explanation

You can use the labelField property of the DropDownList control to specify which field (property) of the complex data structure should be used for display. E.g. when each object in the dataProvider has name property of type String then you would set labelField = "name". Just ensure that the labelField points to a field that returns a String value. Use the change Event of the DropDownList to listen for changes in the DropDownList (e.g. when the user selects a different item). Finally, In the eventhandling function you can use event.target.selectedItem (or the id of the control) to get the currently selected data object.

        <?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"
         creationComplete="creationCompleteHandler(event)"
         >
  <fx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.events.FlexEvent;
      
      import spark.events.IndexChangeEvent;

      [Bindable]
      private var list:ArrayCollection;
      
      private function changeHandler(event:IndexChangeEvent):void
      {
        // get the selected data
        var data:Object = ddlProducts.selectedItem;
        if (data)
        {
          lblInfo.text = "Selected: " + data.name + ", price: " + data.price + ", availability: " + data.availability;
        }
        else
        {
          lblInfo.text = "nothing selected";
        }
      }
      
      private function creationCompleteHandler(event:FlexEvent):void
      {
        // just some data for the DropDownList
        list = new ArrayCollection();
        list.addItem({name: "Nerdball", price: 4.2, availability: 5});
        list.addItem({name: "Geek-O-Mat", price: 12.99, availability: 2});
        list.addItem({name: "Coder's Mug", price: 3.8, availability: 4});
        list.addItem({name: "Flex Wax", price: 6.75, availability: 1});
      }
      
    ]]>
  </fx:Script>
  
  <s:layout>
    <s:HorizontalLayout/>
  </s:layout>
  
  <s:DropDownList id="ddlProducts" prompt="Choose..." dataProvider="{list}" labelField="name" change="changeHandler(event)"/>
  <s:Label id="lblInfo"/>
  
</s:Application>

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.