Ebates Coupons and Cash Back

My {Java} Academy

Learn java and related technologies

How to display flat view datacollection in mx:Tree component?

dataProvider for Tree control requires an Object of tree data or ArrayCollection or XMLListCollection. But many times we need to display the GroupingCollection object into Tree. Below example how can we do that using the root object of GroupingCollection.

  1. Create a Tree.

  2. Instantiate a flat data source (arcData)

  3. Create GroupingCollection2 (Flex 4), as pre required Grouping Fields.

  4. Whenever arcData, the base collection, changes; call refreshTree() function.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="windowedapplication1_creationCompleteHandler(event)" xmlns:local="*" width="318" height="400">
            import mx.events.CollectionEvent;
            import mx.events.FlexEvent;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void

            private function refreshTree():void{
                myTree.dataProvider = gc.getRoot();


        <s:ArrayCollection id="arcData">
                <local:TestItem year="2009" month="Jan" label="Jan Report 1"/>
                <local:TestItem year="2009" month="Jan" label="Jan Report 2"/>
                <local:TestItem year="2009" month="July" label="July Report 1"/>
                <local:TestItem year="2009" month="July" label="July Report 2"/>
                <local:TestItem year="2010" month="Feb" label="Feb Report 1"/>
                <local:TestItem year="2010" month="Feb" label="Feb Report 2"/>
                <local:TestItem year="2010" month="Dec" label="Dec Report 1"/>
                <local:TestItem year="2010" month="Dec" label="Dec Report 2"/>

        <mx:GroupingCollection2 id="gc" source="{arcData}">
                        <mx:GroupingField name="year"/>
                        <mx:GroupingField name="month"/>    

    <mx:Tree id="myTree" dataProvider="{gc.getRoot()}" labelField="GroupLabel" width="100%" height="100%">



Hope this helps.


Flex Tree and GroupingCollection2

Flex Tree and GroupingCollection2


Creative Commons License All posts published in this blog are licensed under a Creative Commons by-nc-sa 4.0 International License.

2009 - 2017 | Mixed with Foundation v5.5.1 | Baked with JBake v2.5.1 | Sitemap | Terms and Usage Policy