ArrayCollection Filter Example
Line Break
Author: Roelof (13 Articles) - Author Website
Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer or traveling. He is also the co-owner of Flex-Blog.com.
This example is all about filtering an ArrayCollection in a DataGrid. We will filter the ArrayCollection using the input from the TextInput field, the value entered as the datagrid values are translated to lower case.
The search is performed without position, this means that if I type ‘weaver’ in the search box, i will find ‘Dreamweaver’ in my results.
Here is the example: (Source can be viewed underneath the example or via Right Mouse Click -> View Source ).
The (almost) complete source code is right here:
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 70 71 72 73 74 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" initialize="init()" width="500" height="300" viewSourceURL="srcview/index.html"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var myArrayCollection:ArrayCollection; private var firstTime:Boolean = true; private function init():void { myArrayCollection = new ArrayCollection; var obj:Object = new Object; obj.product = "Photoshop CS4"; obj.instock = "4"; myArrayCollection.addItem(obj); obj = new Object; obj.product = "Dreamweaver CS3"; obj.instock = "8"; myArrayCollection.addItem(obj); //etc } private function filter():void { myArrayCollection.filterFunction = filterMyArrayCollection; myArrayCollection.refresh(); } private function filterMyArrayCollection(item:Object):Boolean { var searchString:String = myTextInput.text.toLowerCase(); var itemName:String = (item.product as String).toLowerCase(); return itemName.indexOf(searchString) > -1; } private function clearMyTextInput():void { if (firstTime == true ) { myTextInput.text = ""; firstTime = false; } } ]]> </fx:Script> <mx:VBox right="10" left="10" bottom="10" top="10"> <s:TextInput id="myTextInput" change="filter()" enabled="true" focusIn="clearMyTextInput()" text="Filter/Search.." width="100%" height="26"/> <mx:DataGrid id="dataGrid" dataProvider="{myArrayCollection}" verticalScrollPolicy="on" dropShadowVisible="false" verticalAlign="top" editable="false" width="100%" height="80%" paddingTop="2"> <mx:columns> <mx:DataGridColumn dataField="product" headerText="Product"/> <mx:DataGridColumn dataField="instock" headerText="In Stock"/> </mx:columns> </mx:DataGrid> </mx:VBox> </s:Application> |
Related posts:
- Looping over an ArrayCollection with Cursor Example
- Style AdvancedDataGrid depending on data example
- Progressbar in Datagrid Example
- Images in DataGrid depending on data
- Drag and Drop from DataGrid or AdvancedDataGrid to Tree
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(10 votes, average: 4.70 out of 5)
Loading ...Comments
8 Responses to “ArrayCollection Filter Example”
Thanks Roelof…. the post was really helpfull….
hi, this is very helpfull. thanks for the wonderful post.
Hello,
What happens if you have a NULL value in product?
I am experiencing this and am wondering how to workaround it?
I found my solution.
In my data-access method, I must translate any NULL values to empty strings. This forces the regular expression search to work for me.
Also, I wanted to know how to reset the filter textbox’s default text. Here is how I approached it:
private function resetMyTextInput():void {
if (myTextInput.text.length==0)
myTextInput.text = “Filter/Search..”;
}
in MXML, add this to your TextInput. and it re-display the user message for filtering.
focusOut=”resetMyTextInput()”
@Devtron: nice addition!
Hi
Thank you so much for this example. I wonder how to hookup to an products xml file? Can you help me please?
Thank You
Krish
I was wondering, how can I search not only on product item but also on stock item?
Hi Jim,
I have no flash builder here, but you should extend the filterfunction. Just make sure the method returns a boolean value.
If you don’t get it working, you can try our forum!
Roelof