Problem
Finding a way to to filter data in a DataGrid regardless of the data in question case.
Solution
Use ArrayCollection's filterFunction and compare the data's string with a string you provide using RegEx to disregard the strings case (upper, lower or whatever)
Detailed explanation
- First create an array.
- Pass that array to an ArrayCollection.
- Pass ArrayCollection as DataProvider for a DataGrid
- Create a textInput
- Create a function that will filter data from the textInput text, return type Boolean
- Now call the filterFunction method of the ArrayCollection class, pass the filterFunction to created
- create an Event listener for knowing when to filter (eg. textinput, click)
- create a reset button for clearing the filter.
- That's essentially it. See example and code to see the full scope and that should explain it self
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.*;
private var collectionArray:Array;
[Bindable]
private var collectionData:ArrayCollection;
private var selectedName:String = "first";
import mx.controls.Alert;
import mx.events.ItemClickEvent;
private function init():void
{
collectionArray = [{first: 'Dave', last: 'Matthews'},
{first: 'Dave', last: 'Chappelle'},
{first: 'Amy', last: 'Grant'},
{first: 'Bilbo', last: 'Baggins'},
{first: 'Jessica', last: 'Tandy'},
{first: 'Jessica', last: 'Simpson'},
{first: 'Paris', last: 'Hilton'}];
collectionData = new ArrayCollection(collectionArray);
}
public function filter():void {
collectionData.filterFunction = filterFirst;
collectionData.refresh();
}
public function filterReset():void {
collectionData.filterFunction = null;
collectionData.refresh();
}
private function filterFirst(item:Object):Boolean
{
return item[selectedName].match(new RegExp(searchField.text, 'i'))
}
private function search():void
{
if(searchField.text !='')
{
filter()
}
else
{
filterReset()
}
}
private function handleCard(event:ItemClickEvent):void {
selectedName = event.currentTarget.selectedValue as String;
}
private function eraseText(event:MouseEvent):void
{
searchField.text ='';
}
]]>
</mx:Script>
<mx:DataGrid id="nameGrid" dataProvider="{collectionData}" height="210"/>
<mx:VBox y="{nameGrid.height + 10}">
<mx:TextInput tabEnabled="true" tabIndex="1" text="Search First Name" id="searchField" toolTip="Filter First Name" change="search()" rollOver="eraseText(event)" />
<mx:HBox>
<mx:RadioButtonGroup id="nameGroup" itemClick="handleCard(event)"/>
<mx:RadioButton tabEnabled="true" tabIndex="2" label="first" selected="true" groupName="nameGroup"/>
<mx:RadioButton tabEnabled="true" tabIndex="3" label="last" groupName="nameGroup" />
<mx:Button tabEnabled="true" tabIndex="4" click="searchField.text='';search()" label="Reset" />
</mx:HBox>
</mx:VBox>
</mx:Application>
For more examples check out my blog.
Report abuse
