I want to filter a datagrid by multiple criteria. I would like to have several types of components (checkbox, slider, textfield, etc) to filter, each one
set to filter a particular datafield (asset_status, serial, tag....see data structure) in the arraycollection. The filterfunction does not work. When I click type in the textbox or check any checkboxes, it does not retreive the intended results. My entire code is below. The data source structure from the httpservice is listed before the code. Appreciate any help. /////// Data Source Returned From HTTPService /////////////// <?xml version="1.0" encoding="iso-8859-1" ?> <data> <row> <asset_status>Active</asset_status> <p_or_l /> <serial>2CE9049CMC</serial> <is_missing>Reporting</is_missing> <tag>CUSA221733</tag> <bar_conn>3/13/2009 3:18:00 PM</bar_conn> <hell23>61</hell23> <zen_conn>24</zen_conn> <actual_zen_date>4/19/2009 8:24:00 PM</actual_zen_date> <dmi_conn /> <actual_dmi_date /> <alt_conn>3</alt_conn> <hello>05/10/2009</hello> <is_triple>Triple</is_triple> <is_red>okay</is_red> <Disconnected_Asset>Always Connected</Disconnected_Asset> </row> <data> //////////////////////// CODE //////////////////////// <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" creationComplete="initApp()"> <mx:Style source="t.css"/> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; //var missing:ArrayCollection = myData.is_missing.contains('Missing'); [Bindable] var myData:ArrayCollection; // On startup private function initApp():void { srv.send(); } // Filter function private function processFilter(item:Object):Boolean { var nameRet:int = 0; var weekRet:int = 0; var dateRet:int = 0; var amntRet:int = 0; var iRet:int = 0; var chkRet:int = 0; var chkRet2:int = 0; var chkRet3:int = 0; var chkRet4:int = 0; var ret:Boolean = false; // If no filter text, or a match, then true if (!item.serial.length || (item.serial.toUpperCase().indexOf(nameFilter.text.toUpperCase()) >= 0)) { nameRet = 1; } else { nameRet = 0; } if (!item.is_missing.length || (item.is_missing.toUpperCase().indexOf(weekFilter.text.toUpperCase()) >= 0)) { weekRet = 1; } if(item.is_missing <= checkBB) { chkRet = 1; } else { chkRet = 0; } if(item.alt_conn <= slider.value) { amntRet = 1; } if(item.Disconnected_Asset <= checkCC) { chkRet2 = 1; } if(item.Disconnected_Asset == checkDD) { chkRet3 = 1; } if(item.Disconnected_Asset <= checkEE) { chkRet4 = 1; } iRet = chkRet & nameRet & weekRet & chkRet3 & chkRet4 & amntRet; if(iRet == 1) { ret = true; } return ret; } private function resultHandler(e:ResultEvent):void { myData = e.result.data.row; //myData.source = ArrayCollection(e.result.data.row).toArray(); myData.refresh(); myData.filterFunction=processFilter; } private function faultHandler(e:FaultEvent):void { Alert.show(e.fault.message.toString()); // btnGetData.enabled = true; } public function getDetails(id:Number):void{ Alert.show('You clicked the row with an ID of: ' + id); } // Missing [Bindable] var checkBB:String; public function enableChk(event:Event):void{ if(chkAmount.selected) { checkBB = 'Missing'; myData.refresh(); } else { checkBB = 'asdf'; myData.refresh(); } } // Always Connected [Bindable] var checkCC:String; public function enableChk2(event:Event):void{ if(chkAmount2.selected) { checkCC = 'Always Connected'; myData.refresh(); } else { checkCC = 'asad'; myData.refresh(); } } // Intermittently Connected [Bindable] var checkDD:String; public function enableChk3(event:Event):void{ if(chkAmount3.selected) { checkDD = 'Intermittently Connected'; myData.refresh(); } else { checkDD = 'asad'; myData.refresh(); } } // Never Connected [Bindable] var checkEE:String; public function enableChk4(event:Event):void{ if(chkAmount4.selected) { checkEE = 'Never Connected'; myData.refresh(); } else { checkEE = 'asad'; myData.refresh(); } } ]]> </mx:Script> <mx:HTTPService id="srv" url="connectm_4b.dat" result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true"/> <mx:Panel id="panel2" height="100%" width="100%" layout="absolute"> <mx:VBox width="100%" height="100%"> <mx:HBox width="100%" height="40"> <mx:Canvas width="100%" height="100%" backgroundColor="#000000" styleName="topddbar"> <mx:Label x="406.5" y="11" text="Asset Management" fontSize="16" color="#E2E5E5" fontWeight="bold" horizontalCenter="0"/> </mx:Canvas> </mx:HBox> <mx:HBox width="100%" height="100%"> <mx:TabNavigator id="tn" width="200" height="100%" color="0x323232" > <!-- Define each panel using a VBox container. --> <mx:VBox width="200" height="100%" label="General"> <mx:Canvas width="100%" height="100%" backgroundColor="#F4F4F4"> <!-- UI --> <mx:Label text="Serial Filter:" width="100" x="19" y="68"/> <mx:Label text="Number of Days Filter:" width="144" x="19" y="165"/> <mx:TextInput id="nameFilter" width="106" change="myData.refresh();" x="19" y="86"/> <mx:Spacer width="5" /> <mx:Label text="Missing Filter:" width="100" x="19" y="115"/> <mx:TextInput id="weekFilter" width="106" change="myData.refresh();" x="19" y="135"/> <mx:Spacer width="5" /> <mx:Spacer width="5" /> <mx:HSlider id="slider" liveDragging="true" change="myData.refresh()" minimum="0" maximum="30" value="30" snapInterval="5" borderColor="#ffffff" x="20" y="193" labels="['min', '10','15','20','25', 'max']"/> <mx:CheckBox x="20" y="257" label="Missing Assets" id="chkAmount" selected="false" change="enableChk(event)" enabled="true"/> <mx:CheckBox x="20" y="287" label="Always Connected" id="chkAmount2" selected="false" change="enableChk2(event)" enabled="true"/> <mx:CheckBox x="20" y="312" label="Intermittently Connected" id="chkAmount3" selected="false" change="enableChk3(event)" enabled="true"/> <mx:CheckBox x="20" y="338" label="Never Connected" id="chkAmount4" selected="false" change="enableChk4(event)" enabled="true"/> <mx:Label x="19" y="29" text="Filter" fontSize="20" fontFamily="Verdana"/> </mx:Canvas> </mx:VBox> </mx:TabNavigator> <mx:VBox width="100%" height="100%"> <mx:DataGrid dataProvider="{myData}" width="100%" height="100%" horizontalScrollPolicy="auto"> <mx:columns> <mx:DataGridColumn headerText="Status" dataField="asset_status" width="80" textAlign="right"/> <mx:DataGridColumn headerText="Serial Number" dataField="serial" width="80" textAlign="right"> <mx:itemRenderer> <mx:Component> <mx:Label opaqueBackground="{(data.is_red) == 'red' || (data.is_triple) == 'Non Triple' ? '0xD20D0D' : '0xFFFFFF'}" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn headerText="Asset Tag" dataField="tag" width="100" textAlign="right" fontWeight="bold"/> <mx:DataGridColumn headerText="Purchase or Lease" dataField="p_or_l" width="55" textAlign="right"/> <mx:DataGridColumn headerText="Altiris" dataField="alt_conn" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Alt Date" dataField="hello" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Zen" dataField="zen_conn" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Zen Date" dataField="actual_zen_date" width="120" textAlign="right"/> <mx:DataGridColumn headerText="DMI" dataField="zdmi_conn" width="120" textAlign="right"/> <mx:DataGridColumn headerText="DMI Date" dataField="actual_dmi_date" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Altiris" dataField="alt_conn" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Alt Date" dataField="hello" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Barcode" dataField="hell23" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Barcode Date" dataField="bar_conn" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Triple Match" dataField="is_Triple" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Disconnected" dataField="Disconnected_Asset" width="120" textAlign="right"/> <mx:DataGridColumn headerText="Missing" dataField="is_missing" width="120" textAlign="right"/> </mx:columns> </mx:DataGrid> </mx:VBox> </mx:HBox> <mx:HBox width="100%" height="35"> <mx:Canvas width="100%" height="100%" backgroundColor="#5689BE"> <mx:Label x="21" y="4" text="Total:" color="#F6F9FA" fontSize="19" fontWeight="bold" fontFamily="Arial"/> <mx:Label x="81" y="5" text="{myData.length}" fontSize="18" fontWeight="bold"/> </mx:Canvas> </mx:HBox> </mx:VBox> </mx:Panel> </mx:Application>
