Stefan B.log

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:

• Adobe
• Flex Examples
• Alex’s Flex Closet
• Peter Ent
• switchonthecode

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.