ArrayCollection Filter Example
Line Break
Author: Roelof (11 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, travelling or just being lazy. 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?
(7 votes, average: 4.71 out of 5)
Loading ...Comments
2 Responses to “ArrayCollection Filter Example”
Thanks Roelof…. the post was really helpfull….
hi, this is very helpfull. thanks for the wonderful post.