Question : How do you add multiple filters to Flex / ActionScript 3 arrayCollection?

How do you add multiple filters to an arrayCollection using checkboxes

I have an arrayCollection with data and I want to apply filters on the datagrid to match whatever checked in checkboxes which they displayed on the top with the count of each one of them

checkboxes display should be without displaying Cancelled items in the datagrid and if the uers click on the checkbox, the datagrid should be refreshed to match checked items in checkbox list

product01(5) product02(5)

New (4) Active(2) pending(2) Cancelled(2)

Thanks

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            public var myAC:ArrayCollection = new ArrayCollection
            ([
            {item: 'product01', Status: 'New'},
            {item: 'product01', Status: 'pending'},
            {item: 'product01', Status: 'Active'},
            {item: 'product01', Status: 'New'},
            {item: 'product02', Status: 'New'},
            {item: 'product02', Status: 'New'},
            {item: 'product02', Status: 'Cancelled'},
            {item: 'product02', Status: 'Cancelled'},
            {item: 'product01', Status: 'Active'},
            {item: 'product02', Status: 'pending'},
            
            ]);

     
            
        ]]>
    </mx:Script> 
    
 
     <mx:Panel height="100%" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10">
		<mx:HBox width="100%">
			<mx:CheckBox label="product01 ()"/>
			<mx:CheckBox label="product02 ()"/>			
		</mx:HBox>

		<mx:HBox width="100%">
			<mx:CheckBox label="New ()"/>
			<mx:CheckBox label="Active ()"/>	
			<mx:CheckBox label="pending ()"/>
			<mx:CheckBox label="Cancelled ()"/>	
		</mx:HBox>
		
  		<mx:DataGrid id="myDataGrid" dataProvider="{myAC}"   height="100%"/>
  
    </mx:Panel>
   
</mx:Application>

Answer : How do you add multiple filters to Flex / ActionScript 3 arrayCollection?

Well a function is called in order to decide if the object should be filtered. You can check whatever you want inside the function. Hope the following code gets you started.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            public var myAC:ArrayCollection = new ArrayCollection
            ([
            {item: 'product01', Status: 'New'},
            {item: 'product01', Status: 'pending'},
            {item: 'product01', Status: 'Active'},
            {item: 'product01', Status: 'New'},
            {item: 'product02', Status: 'New'},
            {item: 'product02', Status: 'New'},
            {item: 'product02', Status: 'Cancelled'},
            {item: 'product02', Status: 'Cancelled'},
            {item: 'product01', Status: 'Active'},
            {item: 'product02', Status: 'pending'},
            
            ]);

public function filter():void {
    myAC.filterFunction = filterFirst;
    myAC.refresh();
}

private function filterFirst(obj:Object):Boolean
{
    if(prod1CB.selected && obj.item != "product01") {
        false;
    }
    if(prod2CB.selected && obj.Status != "product02") {
        false;
    }
    if(stateNewCB.selected && obj.item != "New") {
        false;
    }

.
.
.

    return null;
}     
            
        ]]>
    </mx:Script> 
    
 
     <mx:Panel height="100%" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10">
		<mx:HBox width="100%">
			<mx:CheckBox id="prod1CB" label="product01 ()" click="filter()"/>
			<mx:CheckBox id="prod2CB" label="product02 ()" click="filter()"/>			
		</mx:HBox>

		<mx:HBox width="100%">
			<mx:CheckBox id="stateNewCB" label="New ()" click="filter()"/>
			<mx:CheckBox id="stateActiveCB" label="Active ()" click="filter()"/>	
			<mx:CheckBox id="statePendingCB" label="pending ()" click="filter()"/>
			<mx:CheckBox id="stateCancelledCB" label="Cancelled ()" click="filter()"/>	
		</mx:HBox>
		
  		<mx:DataGrid id="myDataGrid" dataProvider="{myAC}"   height="100%"/>
  
    </mx:Panel>
   
</mx:Application>