Agrupando e desagrupando dados na AdvancedDataGrid

Colocado por Leonardo França na(s) categoria(s): 1, 4, 6, action, Actionscript, Actionscript 3.0, Actionscript3, Adobe, api, app, AR, back, bar, BI, Bindable, camp, checkBox, class, classe, collection, control, dados, DataGrid, DataProvider, demo, DRE, english, err, event, EventListener, Evento, exemplo, Exemplos, Flex, for, function, gc, handle, html, ide, IE, if, image, int, Java, Javascript, label, layout, lite, live, Mate, mg, MXML, NaN, O, on, override, PHP, pt, referencia, refresh, RIA, Ria’s Geral, servidor, tag, UI, Ved, XML em 04 7th, 2010 | Sem comentários

Precisei implementar uma AdvancedDataGrid em uma funcionalidade que hora ordenava os dados pela primeira letra, hora não. Em primeiro momento achei que fosse bem complicado, já que tinha feito algo semelhante em outro projeto onde deveria agrupar por exemplos hora os servidores, hora as instancias dos servidores.
Ao olhar esse projeto antigo, achei que estava muito complicado e de dificil entendimento, voltei ao livedocs para estudar um pouco mais.
Usei o exemplo basico da Adobe e com algumas adaptações, vi que o que eu queria fazer era mais simples do que imaginava.
Tenho uma camada de dados simples para demonstração, e de inicio, alimento minha grid com ela.

PLAIN TEXT

ACTIONSCRIPT3:

[Bindable]
 private var dpFlat:ArrayCollection = new ArrayCollection([
 {Region:"Southwest", Territory:"Arizona", 
     Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
 {Region:"Southwest", Territory:"Arizona", 
     Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
 {Region:"Southwest", Territory:"Central California", 
     Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
 {Region:"Southwest", Territory:"Nevada", 
     Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
 {Region:"Southwest", Territory:"Northern California", 
     Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
 {Region:"Southwest", Territory:"Northern California", 
     Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
 {Region:"Southwest", Territory:"Southern California", 
     Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
 {Region:"Southwest", Territory:"Southern California", 
     Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
            ]);

Um CheckBox foi adicionando um listener para me dizer quando ele esta selecionado ou não.

PLAIN TEXT

MXML:

<mx:CheckBox id="ckGroup" label="Checkbox"/>

Minha função que trata o evento do CheckBox fará o trabalho de agrupar e desagrupar os dados.

PLAIN TEXT

ACTIONSCRIPT:

private function handlerCheck(evt:Event):void
{
    if(ckGroup.selected)
        {
        trace("selected");
        gc.source = dpFlat;
        gc.refresh();
        hView = new HierarchicalCollectionView(gc);
        myADG.dataProvider = hView;
    }
    else
        {
        trace("no selected");
        myADG.dataProvider = dpFlat;
    }
 }

Estou usando a classe GroupCollection que é responsavel por agrupar meus dados por um determinado campo para ser mostrado na AdvancedDataGrid.

PLAIN TEXT

MXML:

<mx:GroupingCollection id="gc" source="{dpFlat}">
        <mx:grouping>
            <mx:Grouping>
       <!–         <mx:GroupingField name="Region"/>–>
                <mx:GroupingField name="Territory"/>
            </mx:Grouping>
        </mx:grouping>
    </mx:GroupingCollection>

Passando depois para a HierarchicalCollectionView que fornece uma visão hierárquica dos meus dados.

PLAIN TEXT

ACTIONSCRIPT:

gc.source = dpFlat;
gc.refresh();
hView = new HierarchicalCollectionView(gc);
myADG.dataProvider = hView;

O exemplo completo:

PLAIN TEXT

MXML:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.collections.HierarchicalCollectionView;
            import mx.collections.ArrayCollection;
                  
            [Bindable]
            private var dpFlat:ArrayCollection = new ArrayCollection([
              {Region:"Southwest", Territory:"Arizona", 
                  Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
              {Region:"Southwest", Territory:"Arizona", 
                  Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
              {Region:"Southwest", Territory:"Central California", 
                  Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
              {Region:"Southwest", Territory:"Nevada", 
                  Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
              {Region:"Southwest", Territory:"Northern California", 
                  Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
              {Region:"Southwest", Territory:"Northern California", 
                  Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
              {Region:"Southwest", Territory:"Southern California", 
                  Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
              {Region:"Southwest", Territory:"Southern California", 
                  Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
            ]);
            private var hView:HierarchicalCollectionView;
            
            override protected function childrenCreated():void
            {
                super.childrenCreated();
                ckGroup.addEventListener(Event.CHANGE,handlerCheck);
                myADG.dataProvider = dpFlat;
            }
            
            private function handlerCheck(evt:Event):void
            {
                if(ckGroup.selected)
                {
                    trace("selected");
                    gc.source = dpFlat;
                    gc.refresh();
                    hView = new HierarchicalCollectionView(gc);
                    myADG.dataProvider = hView;
                }
                else
                {
                    trace("no selected");
                    myADG.dataProvider = dpFlat;
                }
            }
        ]]>
    </mx:Script>
    <mx:GroupingCollection id="gc" source="{dpFlat}">
        <mx:grouping>
            <mx:Grouping>
       <!–         <mx:GroupingField name="Region"/>–>
                <mx:GroupingField name="Territory"/>
            </mx:Grouping>
        </mx:grouping>
    </mx:GroupingCollection>
    <mx:Panel title="AdvancedDataGrid Control Example" height="75%" width="75%" layout="horizontal" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
        <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" initialize="gc.refresh();">        
            <mx:columns>
                <!–<mx:AdvancedDataGridColumn dataField="Region"/>–>
                <mx:AdvancedDataGridColumn dataField="Territory"/>
                <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/>
                <mx:AdvancedDataGridColumn dataField="Actual"/>
                <mx:AdvancedDataGridColumn dataField="Estimate"/>
            </mx:columns>
       </mx:AdvancedDataGrid>
        <mx:ControlBar>
            <mx:CheckBox id="ckGroup" label="Checkbox"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>