Here is another handy little tip that you see all over the web, how do I filter a data grid (or other list-based control) based on a user’s input? Or more specificially, how to I limit the items that show in a list based on what a user types.
Since I already created a simple XML document of Countries/States, I thought I’d create a basic form that lets a user type in the first few characters of a state name and have the DataGrid filter its results. You’ll also notice that I had to do some not-so-tricky E4X filtering to extract only the American state names.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Script>
<![CDATA[
private function filterFunc(item:Object):Boolean {
return item.text().match(new RegExp("^" + stateName.text, "i"));
}
]]>
</mx:Script>
<mx:XML id="dp" source="countries_states.xml" format="e4x" />
<mx:XMLListCollection id="xmlListColl" source="{dp.country.(@name == 'United States of America').state}" filterFunction="filterFunc" />
<mx:VBox>
<mx:HBox width="100%">
<mx:Label text="Name:" />
<mx:TextInput id="stateName" width="100%" change="xmlListColl.refresh()" />
</mx:HBox>
<mx:DataGrid id="dataGrid" dataProvider="{xmlListColl}">
<mx:columns>
<mx:DataGridColumn id="codeCol" dataField="@code" headerText="Abbr:" width="60" />
<mx:DataGridColumn id="nameCol" dataField="*" headerText="Name:" width="240" />
</mx:columns>
</mx:DataGrid>
<mx:Label text="Filtered: Showing {xmlListColl.length} record(s)" visible="{stateName.text.length > 0}" />
</mx:VBox>
</mx:Application>
View source is enabled in the following example.
I did a similar example on my site http://etc.joshspoon.com. But I didn’t do the refresh (change=”xmlListColl.refresh()” )as easily as you did, though there is more then one way to skin a Flex app.
Keep up the great examples!
The written filter function in this example has a serious limitation - it only filters items from top level of hierarchy in XMLListCollection
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
Is the fact that only the top level of hierarchy in the XMLListCollection is filtered using filterFunction a bug?
Like JabbyPanda said that is a HUGE limitation. Is there somework around for this? Is there a way to assign a filterFunction on each level of the XMLListCollection hierarchy?
Ug! how could I do this in flex 2 its driving me crazy
Seconding Frogmo’s request for a workaround to the filterFunction’s deficient filtering. I think they just used ListCollections on flat hierarchies and when they added the XML counterpart, they forgot expand the filterFunction’s functionality.
FrogMo / peterh,
Can one of you file a bug/enhancement request at http://bugs.adobe.com/flex/ so Adobe can track the issue? Also, if you post the bug number here, I’m sure a few people can vote on the issue.
Thanks,
Peter
Has a bug report been filed for the top level filtering problem? I haven’t been able to find any information on it.
RObert,
Can you please file a bug on the top level filtering problem at http://bugs.adobe.com/flex/ and include a simple test case, if possible.
Thanks,
Peter
Done. Bug ID SDK-17808. https://bugs.adobe.com/jira/browse/SDK-17808
Voted and subscribed.
Thanks,
Peter
Great tip!!!! It helped me a LOT!
Thanx!
Elvis Fernandes
From one Peter to another, thanks. However, I keep getting an error, “TypeError: Error #1006: value is not a function.” I’m not sure why this pops up. I originally tried applying this code to a working filterFunction that matched characters exactly, but when that didn’t work, I recreated an app from scratch, following the example above, but I still get the “…not a function” error. Any clues why this would show up?
Peter,
Which version of the Flex SDK are you using?
I just tried on 3.4 and didn’t have any errors.
Peter