How to combine the power of a Flex Tree control within a ComboBox

// July 22nd, 2009 // Flex framework

I’ve found a good example of how to nest a Flex Tree into a ComboBox with only one issue: the selected tree node wasn’t shown once you close and open back the combo box. So I’ve decided to rewrite the component from scratch trying to remove that issue. The result is shown below.

Here is the mxml code of the example shown above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:wg="com.webgriffe.components.*" 
    creationComplete="loadXML()"> 
 
  <mx:Script> 
  <![CDATA[ 
      import mx.collections.XMLListCollection; 
      import mx.rpc.events.ResultEvent; 
      import mx.rpc.http.mxml.HTTPService; 
 
      public var xmlService:HTTPService = new HTTPService(); 
 
      [Bindable]
      public var xmlResult:XML;
 
      [Bindable] 
      public var xmlList:XMLList;
 
      [Bindable] 
      public var xmlTeams:XMLListCollection; 
 
    public function loadXML():void 
    { 
      xmlService.url = "mlb.xml"                 
      xmlService.resultFormat = "e4x"; 
      xmlService.addEventListener(ResultEvent.RESULT, resultHandler); 
      xmlService.send(); 
    } 
 
    public function resultHandler(event:ResultEvent):void 
      { 
         xmlResult = XML(event.result); 
         xmlList = xmlResult.league; 
         xmlTeams = new XMLListCollection(xmlList); 
      } 
  ]]> 
  </mx:Script> 
  <wg:TreeComboBox 
      width="200" treeHeight="250" 
      dataProvider="{xmlTeams}"
      labelField="@label" />
</mx:Application>

To implement a Flex Tree within a ComboBox we have to reassign the default ComboBox dropdownFactory. By default it’s a List control so we assign it a customized Tree control and add some code to let both the components know each other in order to bind their behaviours. By binding behaviours i mean:

  • When you open the ComboBox, the Tree must be expanded in order to show the selected node.
  • When you select a node in the Tree, the ComboBox text should be assigned the selected node’s label.

Click here to download a zip file with the source files.

I wan to greet the authors of the following articles which represented the starting point of my work:

Enjoy!

15 Responses to “How to combine the power of a Flex Tree control within a ComboBox”

  1. Flex Components « Pat IT Dude Blog says:
    July 29, 2009 at 3:22 am

    [...] Type Ahead How to combine the power of a Flex Tree control within a ComboBox [...]

  2. popov says:
    August 6, 2009 at 3:53 am

    Thanks for this components :)

    I get trouble with this node selected (but not with leaf)

    private function dropDownHandler(event):void{
    item_selected_xml = new XML(comboTree.selectedItem);
    trace(item_selected_xml.toXMLString());
    }

    return the wrong node …

  3. popov says:
    August 6, 2009 at 4:14 am

    ok i must use comboTree.treeSelectedItem

  4. admin says:
    August 6, 2009 at 5:36 am

    Hi popov,

    maybe it could be a good idea to override the get selectedItem function in the TreeComboBox in order to let it automatically return the treeSelectedItem.

    Thank you for your comments.
    Best regards, Alessandro

  5. lordtan says:
    August 14, 2009 at 1:56 am

    Thank you very very much1

  6. popov says:
    August 17, 2009 at 5:41 am

    hi Alessandro ! Pleased to meet you.
    You’re wright, i’ve done so.
    Today i’m searching for a possibility of making a multiple node selection …

  7. popov says:
    August 17, 2009 at 5:53 am

    oups it’s not possible, i mistake myself :}

  8. popov says:
    August 23, 2009 at 10:39 am

    Hi !

    Is there any known problem with the dispatching of change and close events ? some time the events never dispatched in my case

  9. Alessandro Ronchi says:
    August 24, 2009 at 12:08 am

    Hi popov,
    I didn’t experience any problem since now, the component is in a production environment. Anyway I will take a closer look at it.
    Thank you, Alessandro

  10. Vamsi says:
    September 23, 2009 at 1:34 pm

    Hi Alessandro,

    Thanks for the components.

    As directed in your comment I have over written the get selecteditem in treecombobox.as.

    Sometimes the event is not getting dispatched. Can you please help me out..

    Please find my code below.
    Thanks,
    Vamsi.

    private var _dropdown:ListBase;
    override public function get selectedItem():Object
    {
    var item:Object = null;

    if(dropdown && dropdown == _dropdown){
    item = selectedItem;
    treeSelectedItem = item;
    }else{
    item = treeSelectedItem;

    }

    return item;
    }

  11. Alessandro Ronchi says:
    October 1, 2009 at 12:35 am

    Hi Vamsi,
    I apologize because I didn’t answer you before, I’m really overwhelmed by work.
    Anyway, try to change the overridden method this way and tell me if it works better:

    1
2
3

    override public function get selectedItem():Object {
  return treeSelectedItem;
}

    Regards, Alessandro

  12. Vamsi says:
    October 1, 2009 at 7:31 am

    Hi Alessandro,

    Thanks for your reply. I have tried it out and had no luck. It got worst a bit with this override function, the event is dispatched only once.

    Thanks,
    Vamsi.Nagavalli

  13. gtbus says:
    November 26, 2009 at 1:44 pm

    Thanks for sharing this great component! Under what kind of license is this released?
    cheers!

  14. Alessandro Ronchi says:
    November 27, 2009 at 4:09 am

    Hi gtbus,

    unless otherwise specified (for example, fxDao is licensed under GPL2) you can consider all the source code published here license free.

    Sincerely, Alessandro

  15. gtbus says:
    November 27, 2009 at 7:35 am

    Hi Alessandro, you are an exemplary coder. Kudos to you, and thanks again.
    Sincerely, Alejandro – gtbus

Leave a Reply