October 26th, 2007 by Kyle
Tags: arraycollection.-array-collection, datagrid, dataprovider, filter, filtering, Flex, mxml
Posted in: Flex
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:object>
</mx:object>
<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:datagridcolumn>
</mx:datagridcolumn>
</mx:datagridcolumn>
</mx:columns></mx:datagrid></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:array></mx:arraycollection></mx:application>
Here is the running sample:
Browse the source of this example.
Download a zipfile containing the source to this sample.
Tweet
3 Comments »

November 7th, 2008 at 1:21 pm
How would one go about using a combobox to acheive the same filtering result?
say the grid data is from a mysql table and one of the columns is regiion. is it possible to fill a combobox at the top with 1 of each region, and datagrid is filtered based on selecteditem?
Thanks!
January 20th, 2009 at 8:57 am
Flex: Enhanced search filtering Flex3 DataGrid…
In my previous post I’ve tried to customize the ComboBox; now it’s time for the DataGrid – probably the most important GUI component for enterprise applications. If you try to understand the DataGrid and the item rendering stuff in more det…
October 9th, 2009 at 9:46 pm
thx