Friday, May 15, 2009

DataGrid Search usign filterFunction

Following example uses filterFunction on the ArrayCollection.
You can view the example here Search DataGrid

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

<![CDATA[
import mx.events.IndexChangedEvent;
import mx.collections.ArrayCollection;

[Bindable]
private var dp:ArrayCollection = new ArrayCollection([{name:'rahim',add:'fdsds dfdsfsd sf sdf sf '},
{name:'sanket',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Rahim',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Satish',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Vikas',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Jagtap',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Ravi',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Raju',add:'fdsds dfdsfsd sf sdf sf '},
{name:'Parvez',add:'fdsds dfdsfsd sf sdf sf '},
]);

private var tempdp:ArrayCollection;

private function changeHandler(e:Event):void
{
e.stopImmediatePropagation()
if(txtSearch.text == '')
{
dp.filterFunction = null;

}else
{
dp.filterFunction = nameFilter;
}
dp.refresh();
}

private function nameFilter(item:Object):Boolean
{
return item.name.toLowerCase().indexOf(txtSearch.text.toLowerCase())!=-1;
}
]]>
</mx:Script>
<mx:DataGrid x="10" y="87" dataProvider="{dp}" id="dg">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="name"/>
<mx:DataGridColumn headerText="Column 2" dataField="add"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput id="txtSearch" x="58" y="38" change="changeHandler(event)"/>
</mx:Application>


1 comment:

pcmeijer said...

Wow man, i have been searching for this, and nothing seems to be more effective and simple than this example. Thanks a lot!!!