I was helping a customer with a simple sample and couldn’t find one that was specifically what I needed. The docs did have a sample for filtering an arraycollection bound to a combobox (I think) and this wasn’t much of a stretch, but I thought it would be useful to post the sample for the datagrid scenario so that it was no stretch.
Here is the application code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.collections.*;
import mx.events.ItemClickEvent;
private var selectedRegion:String;
public function regionFilterFunc(item:Object):Boolean {
if (selectedRegion=="all")
return true
else
return item.region == selectedRegion;
}
// Function to apply the filter function the ICollectionView.
public function filterAC(event:ItemClickEvent):void {
selectedRegion=event.label;
myAC.filterFunction=regionFilterFunc;
//Refresh the collection view to apply the filter.
myAC.refresh();
}
]]>
</mx:Script>
<!– An ArrayCollection with an array of objects. –>
<mx:ArrayCollection id="myAC">
<mx:Array id="myArray">
<mx:Object state="LA" city="Baton Rouge" region="west"/>
<mx:Object state="NH" city="Concord" region="east"/>
<mx:Object state="TX" city="Austin" region="west"/>
<mx:Object state="MA" city="Boston" region="east"/>
<mx:Object state="AZ" city="Phoenix" region="west"/>
<mx:Object state="OR" city="Salem" region="west"/>
<mx:Object state="FL" city="Tallahassee" region="east"/>
<mx:Object state="MN" city="Saint Paul" region="east"/>
<mx:Object state="NY" city="Albany" region="east"/>
</mx:Array>
</mx:ArrayCollection>
<mx:ToggleButtonBar id="tbb" horizontalGap="5" itemClick="filterAC(event);">
<mx:dataProvider>
<mx:Array>
<mx:String>all</mx:String>
<mx:String>east</mx:String>
<mx:String>west</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ToggleButtonBar>
<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{myAC}">
<mx:columns>
<mx:DataGridColumn dataField="state" headerText="State"/>
<mx:DataGridColumn dataField="city" headerText="City"/>
<mx:DataGridColumn dataField="region" headerText="region"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Here is the running sample:
Browse the source of this example.
Download a zipfile containing the source to this sample.





Recent Comments