Flexponential

HTML’s select control included a tag called optgroup where you could group items in the drop down together and provide a heading that wasn’t selectable. This post looks at making an equivalent component in Flex 4 by extending DropDownList.

Here’s an example of the HTML select control working on W3Schools. Notice that group headings can’t be clicked on or navigated to via the keyboard.

In a previous post I demonstrated how to create a custom List that allows some items to not be selectable. Building on that knowledge all that needs to be done is to override the keyDownHandler method to skip over items that aren’t selectable.

Here is an example of it in action:

View Source

I noticed that after selecting an item and reopening the drop down that item is scrolled to the top. I thought this was a little bizarre and filed SDK-25300. I might write another blog post in the future about how to customize this behavior.

Note: This sample requires Flex SDK 4.0.0.13827 or higher. You can get the latest SDK builds from opensource.adobe.com.