Add a "none" option to a DropDownList without adding it to the dataProvider

Follow Adobe Cookbooks on Twitter

Avg. Rating 5.0

Tags:

Problem

You want to have an item at the top of your DropDownList that allows the user to select "none" and set the selectedItem to null but you don't want to modify the dataProvider that is populating the DropDownList in order to display this item.

Solution

Modify the DropDownList skin to add a single itemRenderer instance that is outside of the DataGroup used to display the contents of the dataProvider. Populate this separate itemRenderer with the "prompt" value from the hostComponent. Add a click event listener to the itemRenderer that sets the selectedItem to null and simulates a click event on the openButton skinPart to make the DDL close.

Detailed explanation

The default skin for the DropDownList component has the following section:

<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
    <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
    <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
        </s:layout>
    </s:DataGroup>
</s:Scroller>

Duplicate the default skin and call it something like "NullFirstItemDropDownListSkin.mxml" and replace the section above with this:

<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
    <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
    <s:VGroup gap="0">
        <spark:DefaultItemRenderer
                click="hostComponent.selectedItem = null;openButton.dispatchEvent(new FlexEvent( FlexEvent.BUTTON_DOWN ))"
                label="{hostComponent.prompt}" width="100%" height="20"/>
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
            </s:layout>
        </s:DataGroup>
    </s:VGroup>
</s:Scroller>

Here's an example of how to use the new skin:

<s:DropDownList 
                prompt="-- none --"
                dataProvider="{items}"
                width="100%" skinClass="components.NullFirstItemDropDownListSkin"/>

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.