Introducing SelectTree – the drop-down tree control!

SelectTree Open
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.
SelectTree Closed

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

    About these ads

    7 Responses to Introducing SelectTree – the drop-down tree control!

    1. Jamie Badman says:

      Nice work. I found I had to shrink the width of the TextInput in the component, else the dropdown was unavailable.

      Jamie.

    2. Kurt, one of my co-workers in the USA has created a sample that uses a tree control as the dropDownFactory of the Combobox.
      We’ve looked into it as a customer has requested this functionality and it seems to work just fine.

      Let me know what you think and if it does the job for you:

      http://kmossman.blogspot.com/2007/03/blog-post.html

      Patrick

    3. prashant d shelke says:

      Hi,
      Its nice work,

      i just want to know, can we show checkbox array on dropdown?
      Thanks,
      Prashant.

    4. Brad Bueche says:

      I have not learned CF yet and cant load one more thing on my laptop (until my company gets me a new one). Would it be possible to get a flex only example. I have loaded it into the flex 3 beta (I also have flex 2 — which my company just purchased for me), but I am getting, as you would expect, the 1180 error “Call to possibly undefined method SubjectGateway”.

    5. Howard Fore says:

      Steve, the current download code has a commented out section where you can specify the index of the selected item. Any progress on implementing that?

    6. cyberdust says:

      unfortunately, no, my flex dev time these days is very limited. Good Luck!

    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

    Follow

    Get every new post delivered to your Inbox.

    %d bloggers like this: