Group and ungroup data in AdvancedDataGrid

Needed to implement a feature that in a AdvancedDataGrid hours ordering the data by the first letter or not. First time I thought it was very difficult as I had done something similar in another project where it should split by examples hours the servers, time servers of the instances.
When looking at this old project, I thought it was very complicated and hard to understand, I returned to livedocs to study a little more.
I used the example of Adobe and basic with some adjustments, I saw what I wanted to do was simpler than I thought.
I have a data layer for simple demonstration, and at first, my food grid with it.

PLAIN TEXT
ACTIONSCRIPT3:
  1. [Bindable]
  2.  private var dpFlat:ArrayCollection = new ArrayCollection([
  3.  {Region:"Southwest", Territory:"Arizona",
  4.      Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
  5.  {Region:"Southwest", Territory:"Arizona",
  6.      Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
  7.  {Region:"Southwest", Territory:"Central California",
  8.      Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
  9.  {Region:"Southwest", Territory:"Nevada",
  10.      Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
  11.  {Region:"Southwest", Territory:"Northern California",
  12.      Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
  13.  {Region:"Southwest", Territory:"Northern California",
  14.      Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
  15.  {Region:"Southwest", Territory:"Southern California",
  16.      Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
  17.  {Region:"Southwest", Territory:"Southern California",
  18.      Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
  19.             ]);

A CheckBox is adding a listener to tell me when he is selected or not.

PLAIN TEXT
MXML:
  1. <mx:CheckBox id="ckGroup" label="Checkbox"/>

My function that handles the event of the CheckBox will do the work group and ungroup data.

PLAIN TEXT
ACTIONSCRIPT:
  1. private function handlerCheck(evt:Event):void
  2. {
  3.     if(ckGroup.selected)
  4.         {
  5.         trace("selected");
  6.         gc.source = dpFlat;
  7.         gc.refresh();
  8.         hView = new HierarchicalCollectionView(gc);
  9.         myADG.dataProvider = hView;
  10.     }
  11.     else
  12.         {
  13.         trace("no selected");
  14.         myADG.dataProvider = dpFlat;
  15.     }
  16.  }

I am using the class GroupCollection which is responsible for grouping my data for a particular field to be displayed in AdvancedDataGrid.

PLAIN TEXT
MXML:
  1. <mx:GroupingCollection id="gc" source="{dpFlat}">
  2.         <mx:grouping>
  3.             <mx:Grouping>
  4.        <!--         <mx:GroupingField name="Region"/>-->
  5.                 <mx:GroupingField name="Territory"/>
  6.             </mx:Grouping>
  7.         </mx:grouping>
  8.     </mx:GroupingCollection>

Turning then to HierarchicalCollectionView that provides a hierarchical view of my data.

PLAIN TEXT
ACTIONSCRIPT:
  1. gc.source = dpFlat;
  2. gc.refresh();
  3. hView = new HierarchicalCollectionView(gc);
  4. myADG.dataProvider = hView;

The complete example:

PLAIN TEXT
MXML:
  1. <?xml version="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  3.     <mx:Script>
  4.        <![CDATA[
  5.             import mx.collections.HierarchicalCollectionView;
  6.            import mx.collections.ArrayCollection;
  7.                  
  8.            [Bindable]
  9.            private var dpFlat:ArrayCollection = new ArrayCollection([
  10.              {Region:"Southwest", Territory:"Arizona",
  11.                  Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
  12.              {Region:"Southwest", Territory:"Arizona",
  13.                  Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
  14.              {Region:"Southwest", Territory:"Central California",
  15.                  Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
  16.              {Region:"Southwest", Territory:"Nevada",
  17.                  Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
  18.              {Region:"Southwest", Territory:"Northern California",
  19.                  Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
  20.              {Region:"Southwest", Territory:"Northern California",
  21.                  Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
  22.              {Region:"Southwest", Territory:"Southern California",
  23.                  Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
  24.              {Region:"Southwest", Territory:"Southern California",
  25.                  Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
  26.            ]);
  27.            private var hView:HierarchicalCollectionView;
  28.            
  29.            override protected function childrenCreated():void
  30.            {
  31.                 super.childrenCreated();
  32.                 ckGroup.addEventListener(Event.CHANGE,handlerCheck);
  33.                 myADG.dataProvider = dpFlat;
  34.            }
  35.            
  36.            private function handlerCheck(evt:Event):void
  37.            {
  38.                 if(ckGroup.selected)
  39.                 {
  40.                     trace("selected");
  41.                     gc.source = dpFlat;
  42.                     gc.refresh();
  43.                     hView = new HierarchicalCollectionView(gc);
  44.                     myADG.dataProvider = hView;
  45.                 }
  46.                 else
  47.                 {
  48.                     trace("no selected");
  49.                     myADG.dataProvider = dpFlat;
  50.                 }
  51.            }
  52.        ]]>
  53.    </mx:Script>
  54.     <mx:GroupingCollection id="gc" source="{dpFlat}">
  55.         <mx:grouping>
  56.             <mx:Grouping>
  57.        <!--         <mx:GroupingField name="Region"/>-->
  58.                 <mx:GroupingField name="Territory"/>
  59.             </mx:Grouping>
  60.         </mx:grouping>
  61.     </mx:GroupingCollection>
  62.     <mx:Panel title="AdvancedDataGrid Control Example" height="75%" width="75%" layout="horizontal" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
  63.         <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" initialize="gc.refresh();">        
  64.             <mx:columns>
  65.                 <!--<mx:AdvancedDataGridColumn dataField="Region"/>-->
  66.                 <mx:AdvancedDataGridColumn dataField="Territory"/>
  67.                 <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/>
  68.                 <mx:AdvancedDataGridColumn dataField="Actual"/>
  69.                 <mx:AdvancedDataGridColumn dataField="Estimate"/>
  70.             </mx:columns>
  71.        </mx:AdvancedDataGrid>
  72.         <mx:ControlBar>
  73.             <mx:CheckBox id="ckGroup" label="Checkbox"/>
  74.         </mx:ControlBar>
  75.     </mx:Panel>
  76. </mx:Application>

references:
http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_06.html

Translations:
Português do Brasil

categories ActionScript 3.0, Flex | Leonardo França | datetime April 7, 2010 11:35 am

No Comments

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

WordPress Themes


Video & Audio Comments are proudly powered by Riffly