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.
-
[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}
-
]);
A CheckBox is adding a listener to tell me when he is selected or not.
-
<mx:CheckBox id="ckGroup" label="Checkbox"/>
My function that handles the event of the CheckBox will do the work group and ungroup data.
-
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;
-
}
-
}
I am using the class GroupCollection which is responsible for grouping my data for a particular field to be displayed in AdvancedDataGrid.
-
<mx:GroupingCollection id="gc" source="{dpFlat}">
-
<mx:grouping>
-
<mx:Grouping>
-
<!-- <mx:GroupingField name="Region"/>-->
-
<mx:GroupingField name="Territory"/>
-
</mx:Grouping>
-
</mx:grouping>
-
</mx:GroupingCollection>
Turning then to HierarchicalCollectionView that provides a hierarchical view of my data.
-
gc.source = dpFlat;
-
gc.refresh();
-
hView = new HierarchicalCollectionView(gc);
-
myADG.dataProvider = hView;
The complete example:
-
<?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>
references:
http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_06.html
Translations:
Português do Brasil
