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>




DataGrid Itemrenderer Issues

After fighting with ItemRenderers in Flex ListBased Controls, I have finally figured out how they really work.

Issues:
1. When you scorll a datagrid it duplicates the itemrenderer's value. This is because datagrid create itemrenderer instances for visible rows only and it reuses these renderers for other rows when u scroll.

2. When you change the dataprovider same problem occurs. This is again because of reuse of itemrenderers.

Solution for first issue is just add an extra container like canvas and put your datagrid into it. Now set the datagrids height, so that no scroll will come
(datagrid.height = dataprovider.lenght * rowheight)
You will get the scroll on parent container.


Solution for second issue: Just reassign your itemRenderer everytime you change the dataprovider.
datagridcolumid.itemRenderer = new ClassFactory(itemRenderer)
datagrid.dataprovider = dataprovider_new