My {Java} Academy

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:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="windowedapplication1_creationCompleteHandler(event)" xmlns:local="*" width="318" height="400">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.events.CollectionEvent;
            import mx.events.FlexEvent;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                refreshTree();    
            }

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

        ]]>
    </fx:Script>
    <fx:Declarations>

        <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"/>
        </s:ArrayCollection>

        <mx:GroupingCollection2 id="gc" source="{arcData}">
            <mx:grouping>
                <mx:Grouping>
                    <mx:fields>
                        <mx:GroupingField name="year"/>
                        <mx:GroupingField name="month"/>    
                    </mx:fields>
                </mx:Grouping>
            </mx:grouping>
        </mx:GroupingCollection2>
    </fx:Declarations>

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

    </mx:Tree>

</s:WindowedApplication>

Hope this helps.

Flex Tree and GroupingCollection2