How to add a separator to your ComboBox

Someone recently asked on a Flex mailing list how to add a separator to a ComboBox dropdown similar to the ones that can be added to a Menu. Alex Harui’s answer was simple to use the code in Menu to do the same thing for ComboBox since this doesn’t come by default. So, I’ve put together an example using a separator. Its probably not the cleanest and hasn’t been fully tested, but, I gave it a try.

In this example, I use a custom dropDownFactory for ComboBox as well as a custom itemRenderer. In the ComboBox itemRenderer, I overrode commitProperties to create a separator when the “type” property in the data was “separator”. I also overrode updateDisplayList to size this separator depending on the size of your ComboBox itemRenderer. Finally, in my custom dropDownFactory, I am overriding mouseEventToItemRenderer and adding code that ignores mouse events if you try to select an itemRenderer with a separator in it. Here is the sample. Good luck!

Demo Example: comboBoxSeparatorExample.swf

Sample Files: comboBoxSeparatorExample.mxml, MyComboBoxItemRenderer.as, MyComboBoxList.as, purpleLine.gif

18 responses

  1. You can select separator from keyboard

  2. Yes… I didn’t write the code for that situation 🙂 I’ll try to write that up when I get the time. I’m assuming, that you just catch the keyUp event, check if it’s a separator and then move to the next list item if it is.

  3. Ok, I uploaded a change to the demo. Now, using the keyboard shouldn’t focus on the separator. Again, I didn’t test this much.

  4. Hello, very nice site, keep up good job!
    Admin good, very good.

  5. hi! my name is faccity! your site is good! i will visit it again! good luck!

  6. if u add more than one seperator …. it works fine for mouse selection but only the first seperator is non selectable using keyboard!… can u please take a look at that

  7. Actually, the real problem with the example was that it was not handling what to do when a scrollbar popped up. The easy solution is to use a ComboBox list that doesn’t scroll. So, I’ve changed the example to do that. I investigated a bit into how to do the scrolling logic. Unfortunately, menus (which use separators don’t scroll in flex) and Lists don’t use separators, so the code to do this is nowhere to be found in the framework and I didn’t have the time to figure it out. It’s a great challenge for someone. I’d be happy to put a link to someone else’s solution to this if they have one. I started to run into some private variables in the ListBase class that I wanted to use and eventually gave up and went with the non scrolling option. Sorry, I don’t have all the answers.

  8. 10x! Nice article 🙂

  9. hi,
    I have implemented this one with one seperator as I needed only one but its not functioning properly.
    Have you updated this renderer to resolve the problem with keyboard selection as seperator get selected some times, also scrolling mouse while list is open , disappears some elements which appears later and other disappears.

  10. Just as an FYI, when I try to grab your purpleLine.gif, it doesn’t work as it says “remote linking of images is not permitted”.

  11. @David – Hopefully, its fixed and you can download purpleLine.gif now.

  12. Hi, I’m trying to implement this example but the ComboBox dropdownFactory expects an IFactory and List is of type Class. I get the error 1067 “Implicit coercion of a value of type Class to an unrelated type mx.core:IFactory. I wonder how this is supposed to work. Thanks a lot in advance!

  13. I got it to work! Thanks for the great tutorial!

  14. We got this to work with this change:

    override protected function moveSelectionVertically(code:uint, shiftKey:Boolean,
    ctrlKey:Boolean):void
    {
    super.moveSelectionVertically(code, shiftKey, ctrlKey);
    if(selectedItem.type == “separator”)
    {
    super.moveSelectionVertically(code, shiftKey, ctrlKey);
    }
    finishKeySelection();
    }

  15. To be more clear, as you mentioned above, when a scroll bar popped up Flex would select the separator when navigating the Combobox with the arrow keys. Making the change to moveSelectionVertically() above seemed to do the trick, as long as there’s never two separators in a row (which nobody ever does).

  16. TIM,

    That’s a good one hint.

    Thanks

  17. Thanks for this posting. This helped me to handle the ctrl+click event in the combo box

  18. I actually desired to share this unique blog, “How to add a separator to
    your ComboBox Flex Butterflies and Bugs” with my
    good friends on facebook or twitter. Ibasically wanted to distributed your tremendous posting!
    Many thanks, Charity

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: