The Flex 2 component set includes a Tree control, but it doesn't have the built-in ability to display checkboxes next to the individual nodes. Since I needed a checked tree control for a project of mine, I went ahead and built it.
You can see it in action below (Flash Player 9 required):
The tree supports two different modes for how the checkboxes operate. The above demo showcases the hierarchical selection, where the parent nodes indicate the checked selection of their children. If all of the children are checked, so is the parent. If none of the children are checked, neither is the parent. If the children are mixed (some checked, some not), the parent node displays the indeterminate state and draws a black box. Clicking on a parent node will update the selection state of all its children, its children children, etc.
The other checkbox mode is for individual selection of the nodes regardless of where they are in the overall structure. Think of this as just a regular checkbox list control, except displayed in a tree format that highlights the overall hierarchy of the data structure. That is, you can select a node and not any of its children, or just select nodes individually from each other. In this mode there is no indeterminate state since every node is either fully selected or not.
Unfortunately, this component was built specifically for a client project so I'm not able to share the source at this time. This may change in the future, and if it does I'll be sure to make a new entry and update this post.
However, I can say that the Flex 2 component architecture made this component fairly easy to implement on a high level. I tapped into the cell renderer architecture and defined what I wanted to be displayed for every tree node. Then, it was just a matter of wiring up the various events to handle data changes and getting the logic right.
It's awesome to see how extensible Flex really is, and how easy it is to roll your own components when it comes down to it. Swapping out a normal tree with the checked tree control is essentially just a matter of changing the item renderer.
Overall, I had a lot of fun in making this component. Its just what the doctor ordered for this project, and we'll definitely get our use out of it...
12 Comments
Hi,
Awesome!
How did you make checked component?
I'm studying cell renderer.
Can I see the code?
Posted by: sato-shi | September 6, 2006 10:06 PM
man, that's very cool.
I almost convinced the boss on something like this but the project got shelved. Pity, it would have nailed the problem.
it would have needed to be able to drag nodes around, tho. change the heirachy.
is that do-able? or a major pain with the heirachy 'checking'?
Posted by: barry.b | September 6, 2006 10:12 PM
Hi Darron, this is just what I'm looking for. I did the same thing but with the Flash Tree Component and integrated with a mysql database (like a TO-DO list). Now I'm learning Flex and thinking to port my work and waiting for the best AMF open source solution.
In your tree is possible hide the icons? I already have developed a recursive engine but I'm lost with the cell renderer. You can give me a light about this?
regards
Posted by: Rafael | September 6, 2006 10:14 PM
Hi Darron,
Well done, as this functionality is available in most desktop applications. Quick question, how well does this component deal with dynamically updated dataproviders? I know the default Tree component in Flex has scrollbar issues with children are added are a node is opened.
Posted by: James Lyon | September 6, 2006 11:01 PM
Hi Darren
It's really cool.
This is exactly what I look for.
Could I get your code?
Thanks
Posted by: Allen | September 7, 2006 1:47 AM
This component is great.
It's exactly what I need.
Does any one have a source code for something like this?
I tried dealing with the renderers but it seems that the TreeItemRenderer is too messy...
Posted by: Barak | September 7, 2006 5:27 AM
I'd puchase a component like this if it were for sale...
Even better yet, how about doing an incredible service to the Flex community by contributing something like this to open source!
Posted by: Arnold | September 7, 2006 10:08 AM
very cool! we need the source :-)
Posted by: Mike | September 7, 2006 11:31 AM
Nice work Dan. source code please?
Posted by: William from Lagos | September 7, 2006 2:21 PM
Hi,
Not to plug anything, darron mentioned what I was doing on a list so I don't think this is weird. ;-)
I have a commercial component that does this and more with styles.
The CheckBoxTreeFX, and you can check out a lot of information about it on my site
http://www.teotigraphix.com
Darron, good job, delete this and email me if you don't want this kindof thing on your blog.
I juust thought it was ironic that you posted this today becasue I just put my site up with info about it today. :)
Peace, Mike
Posted by: Michael Schmalle | September 7, 2006 7:13 PM
I think it's easy to do.
Posted by: Jove | September 7, 2006 7:30 PM
@Mike - Great minds think alike. :-) Looks like we were both working on our checked tree components at the same time without even knowing it.
Posted by: darron | September 27, 2006 11:14 AM