Flex Examples
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.
<?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 name="Tree_itemClick_test" 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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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; }Hey Vijay,
I understand this is a very old post for you. But I was trying to implement your idea for an ADG but in vain.
Can you please explain your code or provide me a project file ofcorse alongwith the whole working code?
Bhargav
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
Thank you very much for this example, it helped me optimise my own code!
Could someone please help me, how do you get the depth of a node in an advanced Data grid.
Hi,
I have been trying the same trick for FileSystemTree in AIR but it does not work.
When I click on the row, I see the triangle looking down. I click again, it goes back to its initial position. I trace if the branch is open and get false/true so no problem there. However, the tree structure does not update itself. Moreover, if I happen to click on the triangle first, then everything works smoothly. There must be something about disclosure events, right?
Another great example!
Hi, very useful example indeed.
I am a newbie so my question may sound stupid, what if you want to point to a specific object (aka folder) and not the whole tree?
Thanks.
Animation on opening and closing doesn’t work. Could you help me?