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.
;-)
Hi Peter,
thanks a lot for all the great examples.
I’ve created a DataGrid with filtering via a text input field:
http://blog.sbistram.de/2009/01/14/flex-enhanced-search-flex3-datagrid/
Maybe someone has usage for it.
Cheers,
Stefan
Is there any way we can filter multiple items via checkbox?
hye…
i want to ask u;what if i have multiple checkbox??user can click on multiple checkbox to filter the datagrid.can u show me how the code look like??
thanks in advance!!
Great site,
I’ve been learning a lot from these posts
But i kan’t find a posts on combobox DataGrid filter
any tips
I’ve been using many of your articles to aid in my flex development. Cudos to you for your posts. Keep them coming!
what about using a combo box to filter? I tried to set one up, but it only repeats the first item that I want filtered it doesn’t check the rest of the XML file.
Good example. I’m using a XMLListCollection and have filtering working. However I want to add the same type of label you have for the panel status: {arrColl.length}/{arrColl.source.length}. My XMLListCollection is called tixXML and I can get the displayed size (tixXML.length) however how do I get the length of the unfiltered tixXML? After I filter the results tixXML.length changes to the number of displayed results however I also want the length of the unfiltered results? Do I need to set a var to the original amount or is there a property I can access?
Thanks in advance.
Stefan Bistram and site admin:
Great examples, i needed something to search a data grid, but filtering the ArrayCollection resulted in a much more elegant solution.
Thanks
Hi,
I am working on open source, reusable extension of Flex 3 DataGrid to enable client-side filtering and searching. My solution includes filters using multiple CheckBoxes, TextInput, Slider and more…
You can find it at
http://www.iwobanas.com/2009/06/datagrid-with-client-side-filtering-and-searching/
I am looking forward any comments and suggestions from you!
Cheers,
Iwo Banaś