The following example shows how you can filter items in a Flex DataGrid using a CheckBox control, and the ArrayCollection class’s filterFunction property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
private function toggleFilter():void {
if (checkBox.selected) {
arrColl.filterFunction = processFilter;
} else {
arrColl.filterFunction = null;
}
arrColl.refresh();
}
private function processFilter(item:Object):Boolean {
return parseFloat(item.value) == 0;
}
private function value_labelFunc(item:Object, col:DataGridColumn):String {
return item[col.dataField].toFixed(2);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="ColdFusion" value="0.00" />
<mx:Object name="Dreamweaver" value="0.12" />
<mx:Object name="Fireworks" value="1.01" />
<mx:Object name="Flash" value="0" />
<mx:Object name="Flash Player" value="-0.00" />
<mx:Object name="Flex" value="0.00" />
<mx:Object name="Illustrator" value="2.92" />
<mx:Object name="Lightroom" value="0.32" />
<mx:Object name="Photoshop" value="0.06" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="name" />
<mx:DataGridColumn dataField="value"
labelFunction="value_labelFunc" />
</mx:columns>
</mx:DataGrid>
<mx:ControlBar>
<mx:CheckBox id="checkBox"
label="Filter DataGrid"
click="toggleFilter();" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
Looks like there’s a typo in the title: “using a combobox to filter items…” when, of course, it’s a checkbox in the code and example.
Great site, by the way. I’ve been learning a lot from these posts … much appreciated.
Michael Matti,
Rats! Thanks for the heads up. I changed the article title, but left the URL the same, so it doesn’t break any links or whatever.
Peter
Thanks your great article.I have translated some contents on flexexamples.com to Chinese on my blog ( http://blog.minidx.com) , in order to be more friendly and easy for chinese users to read. All the translated files contain the original URL and be credited by Peter deHaan. Hope could get your approve.
minidxer,
That’s great, thanks!
Yep, everything on the blog is creative commons, so you’re free to use/translate the content as long as you attribute the work and add a link back to this site.
Thanks,
Peter
Hi Peter,
I’m currently doing a filter function in an application. My understanding is that when you try to filter a specific dataField you can do this: “if (item.origin == “WA”)” “origin” is a specific column on a datagrid column. But what if I want to store that datafield column in a variable?
for example: var custom_datafield:String = “origin” ;
and do this: if (item.custom_datafield == “WA”) — I am not getting any returned records and it did not give me errors as well. I need your expertise on this.
Are there any other way to do this?
In case you are wondering why I need to store the dataField name into a variable is because I am creating a datagrid component that will accept any XML file using only one datagrid and one filter functionality.
Thanks,
Arnold
Hi Peter,
According to my Project, I need to show some more Filters based on the ComboBox Selection,
First One
For Example: If User selects the 1st option in the Combo, I need to show few more Option in the Bottom, and if the again selects the other option in the ComboBox, I need to show Different filter based on Selection.
and second point, Based on the selection of the Filter I need to update the Report by the Update Button.
Hope Atleast I will get the First Criteria
Thanks a lot
Wow, this is great… but….. it would be nice to filter on multiple items.
;-)