The following example shows you how you can prevent users from selecting the branch (folder) items in a Tree control in Flex by listening for the itemClick event and using the Tree class’s dataDescriptor.isBranch() method to determine whether the currently selected item is a branch, and if so, deselect the item.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/16/preventing-branches-from-being-selected-in-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
private function tree_itemClick(evt:ListEvent):void {
var item:Object = evt.currentTarget.selectedItem
if (tree.dataDescriptor.isBranch(item)) {
tree.selectedItem = null;
}
}
]]>
</mx:Script>
<mx:XML id="dp">
<root>
<node label="Parent 1">
<node label="Child 1" />
<node label="Child 2">
<node label="Grandchild 1" />
<node label="Grandchild 2" />
</node>
<node label="Child 3" />
<node label="Child 4" />
</node>
</root>
</mx:XML>
<mx:Tree id="tree"
dataProvider="{dp}"
showRoot="false"
labelField="@label"
width="200"
itemClick="tree_itemClick(event);" />
</mx:Application>
View source is enabled in the following example.
For more information on disabling list selection in the List/Tree/ComboBox controls, see Alex Harui’s excellent blog entry, “Disabling List Selection”.
For another example, see “Preventing specific items from being selected in a Flex Tree control”.
{ 4 comments… read them below or add one }
However, nothing prevents the user from selecting the item above and using the down arrow key to select the branch.
@Glen … indeed … and I cannot find a way to disable the disclosure button. The TreeItemRenderer assigns a Mouse DOWN event to it but the listener function is private so I can’t override.
I updated my blog with an entry on creating a slick Tree control that automatically closes branches that are open before opening the new one. More importantly, it does the same thing whether you click the disclosure button or the item.
http://blog.lyraspace.com/2009/04/02/slick-flex-tree-control/
Peter, how do you embed your SWF files in Wordpress? Are you using a plugin or SWFObject?
lee probert,
I use the very high-tech approach of using an <iframe></iframe> tag. It’s pretty Web 1.0, but it actually works fairly well.
Peter