How should one view different filtered data in different datagrids that use the same underlying ArrayCollection?

Question

I have a global arraycollection that holds all the information pertaining to a type of data set. I would like to have different datagrids that filter the data, typically by equating a particular column. How should one go about this?

Edit: My thinking so far: If there was a filter function for the datagrid rather than the underlying arraycollection, that would solve the problem. Alternatively, if one could reflect the global arraycollection with a "subset arraycollection" that automatically filtered the global arraycollection, and of course, automatically reflected changes in the underlying array collection, that would do it too. Is either of these solutions natural/trivial in flex?

Answer 1

You should use a ListCollectionView for this.

It allows custom filters of an underlying source collection. Changes to the source collection are reflected in the filtered view.

Ie:

 [Bindable]
 public var allTheData:ArrayCollection;


 <mx:ListCollectionView list="{allTheData}" filterFunction="myFilterFunction" id="filteredView1" />


<mx:DataGrid dataProvider="{filteredView1}" />

Answer 2

Here's one way to do it. Although this example uses Lists, it should work for DataGrids since it's the collection being filtered and not the view. The 'Add List Items' button and addListItems() method show one way to update the filtered Lists when the underlying data changes.

<fx:Script>
    <![CDATA[
        private function populateListA(collection:ArrayCollection):ArrayCollection
        {
            var ac:ArrayCollection = new ArrayCollection(collection.source);                
            ac.filterFunction = filterListA;
            ac.refresh();                   
            return ac;
        }

        private function populateListB(collection:ArrayCollection):ArrayCollection
        {
            var ac:ArrayCollection = new ArrayCollection(collection.source);                
            ac.filterFunction = filterListB;
            ac.refresh();               
            return ac;
        }

        private function filterListA(item:Object):Boolean
        {
            return item == "ListA";
        }

        private function filterListB(item:Object):Boolean
        {
            return item == "ListB";
        }

        private function addListItems():void
        {   
            arrayCollection.addItem("ListA");
            arrayCollection.addItem("ListB");               
            listA.dataProvider = populateListA(arrayCollection);
            listB.dataProvider = populateListB(arrayCollection);
        }
    ]]>
</fx:Script>
<fx:Declarations>
    <s:ArrayCollection id="arrayCollection">
        <fx:Array>
            <fx:String>ListA</fx:String>
            <fx:String>ListA</fx:String>
            <fx:String>ListA</fx:String>
            <fx:String>ListB</fx:String>
            <fx:String>ListB</fx:String>
            <fx:String>ListB</fx:String>
        </fx:Array>
    </s:ArrayCollection>
</fx:Declarations>
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<s:List id="listA"
        dataProvider="{populateListA(arrayCollection)}"/>
<s:List id="listB"
        dataProvider="{populateListB(arrayCollection)}"/>
<s:Button click="addListItems()"
          label="Add List Items"/>