The following example shows how you can expand/collapse branches in a Flex Tree control by clicking on the row instead of having to click on the disclosure/arrow icon.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.events.ListEvent;
private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (tree.dataDescriptor.isBranch(item)) {
tree.expandItem(item, !tree.isItemOpen(item), true);
}
}
private function tree_labelFunc(item:XML):String {
var children:ICollectionView;
var suffix:String = "";
if (tree.dataDescriptor.isBranch(item)) {
children = tree.dataDescriptor.getChildren(item);
suffix = " (" + children.length + ")";
}
return item[tree.labelField] + suffix;
}
]]>
</mx:Script>
<mx:XML id="dp">
<root>
<folder label="One">
<folder label="One.A">
<item label="One.A.1" />
<item label="One.A.2" />
<item label="One.A.3" />
<item label="One.A.4" />
<item label="One.A.5" />
</folder>
<item label="One.1" />
<item label="One.2" />
</folder>
<folder label="Two">
<item label="Two.1" />
<folder label="Two.A">
<item label="Two.A.1" />
<item label="Two.A.2" />
</folder>
</folder>
</root>
</mx:XML>
<mx:Tree id="tree"
dataProvider="{dp}"
showRoot="false"
labelField="@label"
labelFunction="tree_labelFunc"
width="300"
rowCount="6"
itemClick="tree_itemClick(event);" />
</mx:Application>
View source is enabled in the following example.
{ 22 comments… read them below or add one }
Hi Peter!!!
This is what I was looking for!!!
THANK YOU!!
eternalko
Hi Peter,
great and very useful :-)
Klaus
thanks,good example!
How do I translate this example to use in an advanceddatagrid?
Thanks,
Yair
You amaze me with every post, thanks a lot.
OMG have been trying to find this for ever. Would be nice to see a XML populate this navigation with subcategories, would be killer!
very useful sample, I have used it in our project!
thanks!
Thanks.
Just a note – it looks like the
itemOpenanditemCloseevents don’t get dispatched when you click on the row (only when you click on the arrow), so you may need to dispatch them manually:private function tree_itemClick(evt:ListEvent):void { var item:Object = Tree(evt.currentTarget).selectedItem; var eventType:String; if (tree.dataDescriptor.isBranch(item)){ tree.expandItem(item, !tree.isItemOpen(item), true); // Clicking on anything other than the arrow doesn't dispatch the // normal Tree events, so manually dispatch... eventType = (tree.isItemOpen(item)) ? TreeEvent.ITEM_OPEN : TreeEvent.ITEM_CLOSE; var event:TreeEvent = new TreeEvent(eventType); event.item = item; tree.dispatchEvent(event); } }nwebb,
Great tip, thanks!
Peter
Is there a way to keep the folders from getting selected with the highlight. They can highlight on rollover, just not persist the highlight on click.
Dont work, for dispatch this event you have to use the internal function dispatchTreeEvent!
1 – import mx.core.mx_internal;
2 – use namespace mx_internal;
3 – dispatchTreeEvent(TreeEvent.ITEM_OPENING,
item, //item
this, //renderer
evt, //trigger
!isItemOpen(item), //opening
true, //animate
true) //dispatch
mx_internal allow to access to ‘private’ members and is very usefull (another example is for the VideoDisplay to enable the smoothing)
Is it possible to make wordwrape for TExt…Or is it possible ot make variable row height with tree control….
Great work!
Could you please tell me how to handle the item_click stuff in reference to an ADVANCEDDATAGRID.
Many thanks in advance.
Gerry
Thanks Peter, Great stuff!
I’d like to see an example of this with AdvancedDataGrid as well!
Hi all.
For those who want to apply the same logic to an ADG, here’s what I did (I’m an amateur, so be gentle if the coding turns out to contain woeful inefficiency)…
private function adg_itemClick(evt:ListEvent):void { var item:Object = AdvancedDataGrid(evt.currentTarget).selectedItem; totList.expandItem(item, !totList.isItemOpen(item), true); }It worked perfectly. I got rid of the if test because I couldn’t find the adg crollary to the dataDescriptor.isBranch bizzo. (‘Bizzo’ is an Australian technical term, meaning ’something I dont really understand’… I understand if you aren’t familiar with it)
‘totList’ is the adg to which this function is applied as an itemClick.
As usual, flexexamples has given me something that solves a problem – with my role being to find out how to bash the example to fit my project.
Cheerio
GT
France
PS sorry for not uttingthe code in acode frame – I can’t see how to do that.
Just to confirm … with the AdvancedDataGrid not checking if the clicked item is a branch doesn’t seem to matter. The only thing that confused me is the AdvancedDataGridItemSelectEvent in FB3 that the compiler doesn’t like … you need to use a standard ListEvent … ho-hum! Also, while I’m at it … if you’re wondering how to assign different Item renderers for different branches look in the Flex help at the <mx:rendererProviders> tag … this was very handy!
Is there a way to get the actual item from a itemRollover event when using an advanced datagrid that is grouped from a flat arraycollection? With the original datagrid you could simply get the item using this method on the event:
event.currentTarget.dataProvider.getItemAt(event.rowIndex))
About that close/open event dispatching, look at fourth parameter of expandItem method (dispatchEvent:Boolean = false). Set it to true and it will work just fine.
How to get the exact value from a itemRollover event when using an advanced datagrid
For ADG u need to use the ADGGroupItemRenderer:
public class MyAdvancedDataGridGroupItemRenderer extends AdvancedDataGridGroupItemRenderer { private var _listOwner:AdvancedDataGrid; private var _listData:AdvancedDataGridListData; public function MyAdvancedDataGridGroupItemRenderer(){ super(); } override public function set listData(value:BaseListData):void { super.listData = value; if (value) { _listData = value as AdvancedDataGridListData; _listOwner = value.owner as AdvancedDataGrid; label.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void { _listOwner.contextMenu = myContextMenu(); event.stopImmediatePropagation(); }); label.addEventListener(MouseEvent.MOUSE_OUT, function(event:MouseEvent):void { _listOwner.contextMenu = null; event.stopImmediatePropagation(); }); addEventListener( MouseEvent.CLICK, function(event:MouseEvent):void { _listOwner.expandChildrenOf(_listData.item, !_listData.open); event.stopImmediatePropagation(); }); } } private function myContextMenu():ContextMenu { var contextMenu:ContextMenu = new ContextMenu(); contextMenu.hideBuiltInItems(); var expandCollapseItem:ContextMenuItem = new ContextMenuItem("Expand/Collapse Item",false,true,true); expandCollapseItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(event:ContextMenuEvent):void { _listOwner.expandItem( _listData.item, !_listData.open, false, false,null); event.stopImmediatePropagation(); }); contextMenu.customItems.push(expandCollapseItem); var expandCollapseChildrenOf:ContextMenuItem = new ContextMenuItem("Expand/Collapse Children Of",false,true,true); expandCollapseChildrenOf.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(event:ContextMenuEvent):void { _listOwner.expandChildrenOf(_listData.item, !_listData.open); event.stopImmediatePropagation(); }); contextMenu.customItems.push(expandCollapseChildrenOf); /** * collapseAll/expandAll is causing * Error #1502: A script has executed for * longer than the default timeout period of 15 seconds. */ // var collapseAllMenuItem:ContextMenuItem = new ContextMenuItem("Collapse All Groups",true,true,true); // collapseAllMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, // function(event:ContextMenuEvent):void { // _listOwner.collapseAll(); // }); // contextMenu.customItems.push(collapseAllMenuItem); // // var expandAllMenuItem:ContextMenuItem = new ContextMenuItem("Expand All Groups",false,true,true); // expandAllMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, // function(event:ContextMenuEvent):void { // _listOwner.expandAll(); // }); // contextMenu.customItems.push(expandAllMenuItem); return contextMenu; }Hi,
Nice example. Can you explain how to display only the nodes we want ?
For example, in your XML, you have “folder” nodes and “item” nodes, and I would like to only show “folder” nodes.
Is it possible ?
Thanks,
Sam