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:

This movie requires Flash Player 9

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

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis