Flex: Enhanced search filtering Flex3 DataGrid

In my previous post I’ve tried to customize the ComboBox; now it’s time for the DataGrid - probably the most important GUI component for enterprise applications. If you try to understand the DataGrid and the item rendering stuff in more detail (like me) you should take a look at these cool sites:

I’ve created a MatchDataGrid with the same kind of filtering like I have done for the MatchComboBox and I’ve also added some code for using links and some decorator stuff. All filtering for the DataGrid is done on the client side (browser or AIR), this is not about backend filtering or paging.

Demo

To get a real impression I used some real data. You don’t need the Filter - Checkbox to switch filtering off, but I’ve added it here to show its complete functionality. Also the layout and design of the controls could be done more nicely (e.g. using SearchBox), but hey, it’s just a demo!

You can get the source from here, but please be careful - the component was not heavily tested and so far not used in any application.

Demo data

The data for the demo grid was created from a file named BK05Q406.KE1 downloaded from a german website for health insurance matters. The content is not valid anymore, so please don’t use it for anything else! I’ve wrote a small Ruby script to transform the EDIFACT format into XML.

Source

If you look at the source you will see that all the code for the demo is written in two files Main.mxml and Grid.as and the code for the MatchDataGrid, MatchDataGridItemRenderer and MatchFilter is under the package folder de.sbistram.controls. Some code comment is probably missing (like always), but nevertheless most of the stuff is straight forward.

Open issues

More or less the same like with the MatchComboBox - not tested in any serious application so far and missing unit tests. I’m sure there are some bugs, but maybe the code is a good starting point and someone can use it.
The filter allows also filtering of one input text per column, so the GUI demo should be extended.
I replaced the lightweight DataGridItemRenderer with the heavyweight Label renderer. So this is causing rendering performance problems for grids containing more than ca. 100 visible cells.
HTML is used to mark the matched text and also used for the anchor links, but other HTML stuff is not supported and will not work! So keep it in mind.
Would be nice if the link underlines are only visible when hovering over the link (or at least as an option).
Maybe ‘Match’ wasn’t such a good name for the controls because it has nothing to do with matching regular expressions.

Flex 4

I hope that Flex 4 (codename Gumbo) offers more HTML support out of the box than Flex 3 - so let’s hope and wait for FxDataGrid.

Written by Stefan Bistram

January 14th, 2009 at 10:17 pm

Posted in AIR, AS3, Flex

18 Responses to 'Flex: Enhanced search filtering Flex3 DataGrid'

Subscribe to comments with RSS or TrackBack to 'Flex: Enhanced search filtering Flex3 DataGrid'.

hi i did’nt find any xml file in the zip folder. it is showing fault

ravi

13 Feb 09 at 10:54 am
ravi,
the xml data for the demo is coming from the server side via the HTTPService request. If you want to run the code locally without using your own data and customizing the grid.as file you can simply remove the HTTPService in main.mxml and use an array like this:
```
[Bindable] private var _data:Array = [
  { city:"Hamburg", code:"20097", ik:"106567996", name:"DAK", street:"Nagelsweg 27-35" },
  { city:"Iserlohn", code:"58638", ik:"103501046", name:"Vereinigte IKK", street:"Handwerkerstraße 4" }
]
```
Hope that helps.
Stefan Bistram

14 Feb 09 at 12:42 am
Hi,
Try this
http://skr4u.wordpress.com/search-and-filter-component-for-list-and-combobox-in-flex/

sanjeev

27 Mar 09 at 10:49 am
Wow this is so cool,
This is what i was looking for.
Thank you so much!

Nuwan

1 Apr 09 at 7:42 am
Thanks for this it’s brillant I had one problem though and wanted to post it incase anybody else finds the same. When using hard coded dat it was fine then when I used the HTTPService component the ItemRenderer was trying to render data before any existed and was throwing an error. The fix was to check that list data existed before updating the display list. So within MatchDataGridItemRenderer.as change the overide of the updateDisplayList function to the following:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(listData)
{
var grid:MatchDataGrid = listData.owner as MatchDataGrid;
if (grid.decoratorFunction != null) {
grid.decoratorFunction(this, unscaledWidth, unscaledHeight);
}
}
}

I am using Flex2 I don’t know if this has anything to do with it.

Thank you again

God Bless

attonbomb

25 Apr 09 at 11:24 pm
Hi,

I am working on similar open source, reusable extension of Flex 3 DataGrid with client-side filtering and searching.

You can find it at http://www.iwobanas.com/2009/06
/datagrid-with-client-side-filtering-and-searching/

Hope you will like it

Cheers,
Iwo Banaś

Iwo Banas

1 Jul 09 at 3:10 pm
Hello,

I’m a newbie in flex and I’ve got a question which I think is linked to what you have done. Sorry if that’s not the case.

I would like to disable the default behaviour of the datagrid in which it places itself in a row when you click a value on the keyboard, provided that value appears in one of the columns. For example, in your case if I’d introduce a “T” if would go straight to the third line in which you have a cell with the value “TECHNIKER KRANKEKASSE….”. The reason i want to do this si so that this functionality does not interfere with my shortcuts.

I have seen that your DataGrid does not behave the same way althought I cannot make out why by looking at your source code (newbie as I am).

Could you tell me why?

Thanks!

Alex.

Alex

8 Oct 09 at 12:01 pm
Hi,

I just figured out that extending DataGrid and overriding the findString function to return false all the time, did the trick.

Thanks anyhow!

Alex.

Alex

8 Oct 09 at 1:29 pm
Very nice…..it would be nice to have the xml file so I can test it on localhost.
I modified HTTPService (on main.mxml) to POST and get the data from an ASP page (no data showing)….
So having the original xml file would be nice….

Bill

5 Dec 09 at 11:24 am
My user wanted a datagrid with both sort and filter capabilities. ’something like MS-Excel’.
It should also preserve its filters and sort when the data is refreshed. The sort should also be reasonable fast with datagrids of 2000 rows.
I’ve worked out an example. It has normal datagrid headers (with sort), but also has an extra row under the headers where you can define your filter (wildcards are supported).
If anybody is interested mail me with my name at gmail.com and I will send you the code.

ealsedewilde

20 Dec 09 at 11:02 pm
thanks..
very nice.. its soo helpfull

nurdin

27 Dec 09 at 5:28 pm
Kudos man wonderful component thanks a lot man

Dhruba jyoti nag

20 Jan 10 at 5:22 pm
Very nice work, by far the best Filter Grid I could find.
One thing though - is it possible to set it in such a way where numeric search can be and exact match? E.g. If a user want to find something with a price of $10 they want it to be exact and not show up 10, 110, 210, 310, etc…

Agian - great job and thank you for sharing.

Jason

22 Feb 10 at 10:50 am
[...] apps, in-column filtering is a powerful option to offer. It is pretty easy to implement with Flex or Ajax. Just validate the need for this type of functionality with your customers; it could be [...]

Ultimate guide to table UI patterns

8 Mar 10 at 7:33 am
[...] apps, in-column filtering is a powerful option to offer. It is pretty easy to implement with Flex or Ajax. Just validate the need for this type of functionality with your customers; it could be [...]

Ultimate guide to table UI patterns « Theresa Neil

8 Mar 10 at 7:36 am
[...] Search with in DataGrid in Flex 25 05 2010 Searching data with in the DataGrid, For my recent project I need this requirement. I googled a bit and found this link [...]

Search with in DataGrid in Flex « Niamathbasha’s Weblog

25 May 10 at 11:12 am
[...] In Uncategorized on June 16, 2010 by avi4uall http://blog.sbistram.de/2009/01/14/flex-enhanced-search-flex3-datagrid/ [...]

Useful links « Flex Developers Blog

16 Jun 10 at 1:31 pm
Hi Stefan,

This example is excellent. I was looking for a similar example where we can define AND, OR, NOT boolean operators to check various filter combinations and then display the search result.
Please help me with your tips.

Thanks, Vish.

Vish

21 Jul 10 at 9:01 am

Stefan B.log