Introducing SelectTree – the drop-down tree control!

The SelectTree control provides the perfect combination of tree-based data selection with drop-down combo-box space consumption. This component was created to fit a large tree into a very small space.

Usage: The tree acts like any other form control when you tab to it you can use the spacebar to open the control and then use the arrow keys to navigate the tree, select an item and then tab again to close the control and move on. You can also use the mouse to open and select an item which will automatically close the control.

Tag Usage:

<view:SelectTree id="selectTree"
   dataProvider="{subjects}"
   change="treeChange(event)"
   labelField="sSubject"
   tabEnabled="true"
   tabIndex="2"
   textFunction="getSelectTreeItemText" />

Installation: Installation requires only placing the SelectTree.mxml file in your project and either including the main.css file in your mxml file or moving the class in their to your CSS file. The zip file also includes a sample use of the SelectTree. In the sample file, look for the sections marked Customize to configure it for your use. The SelectTree was designed for use with the CFC object hierarchy that I posted previously.

Known Issues: (please feel free to help me fix them)

Tabbing out of the control when it is open moves backwards one item

The data type of the control’s selectedItem property is set to Object to allow it to support any type of hierarchy, but this may not work well for your application if you depend on the selection of the control to be of a particular type. You may need to set it to a specific type inside the SelectTree.mxml file.

Final Disclaimer: I am in no way a master Flex Component developer and I can only hope that someone who is will contact me with a much better way to code this component. Until then, it works for me so I hope it will work for you.

Enjoy!

Download Here