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:

<?xml version="1.0"?>
<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:

This movie requires Flash Player 9

Browse the source of this example.
Download a zipfile containing the source to this sample.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • digg
  • Technorati
  • Reddit
  • del.icio.us
  • Slashdot