Flex Trees can be difficult to filter because of their hierarchical nature. One possible way to do it is to use an ArraryCollection as your dataProvider, with each node having a "children" property that is also an ArrayCollection.

The tricky part in filtering the Tree is making sure the children are filtered in addition to the root nodes.  So, in the example below, I have created a function that will loop through each node and its children recursively.

It is important to note that the filtering takes place from the bottom up, meaning that a node's children are always filtered before the node itself.  This is important, because normally a filter removes everything that does not match a certain criteria.  In our case, to remain in the collection, a node must match a certain criteria OR have children that do.

One of the bad things about using itemRenderers in a DataGridColumn is that you lose the dataTip functionality that it normally provides.  Well, here is a way to fake that functionality.

First, add the dataTipField or dataTipFunction to the DataGridColumn like you normally would.

Then, in your itemRenderer add the following code to be able to tap into that information and display a tooltip instead.

This works with both dataTipFields and dataTipFunctions and lets you treat the dataTips in your columns the same way, regardless of whether you're using an itemRenderer or not.  The only minor difference is the positioning of the label, but that can be easily modified with styles. You can download the full source code here, for a functional example of how this works.

In a previous post I explained how a rendering bug in Flex was causing items to disappear in an itemRenderer. In the example below, you can see that when you scroll, the items in the list disappear.  This is caused by the varying heights of the elements.  If you explicitly set the height for each element or set variableRowHeights to false, then the problem goes away.

What was causing the problem was apparent but the solution was not.  Thankfully, Olivier Lalonde was nice enough to shed some light on an easy fix.  The itemRenderer needs to be validated as the user scrolls.  So, as Olivier suggests, you simply need to listen for the dataChange event and execute the validateNow() function.

You can see in the example below that the list now has varying row heights... and the data no longer disappears. NICE!  The key point to focus on here is the following line: <mx:VBox dataChange="validateNow()" verticalGap="0">

I've been playing around with Adobe AIR lately and I've really been enjoying it.  So I thought I'd put out this quick tutorial on how to drag and drop a file into your AIR application; in this case we will be using a CSV file, and then we will parse that file so that its data can be used in a datagrid.  You can download the full source code here.

Dragging a file into AIR:

First, we need to set up handlers to listen for the drag events.  We are going to set up two listeners, one for when an item is dragged over the app and one for when that item is dropped.

this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnterHandler);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dragDropHandler);

Then we'll set up the two handler function.  The dragEnterHandler function determines if the item is an acceptable file type.  You could use the different constants of the ClipboardFormats class to only accept specific file formats, but for now we will accept any valid file.

Next, when the user drops the file, we will copy it from the clipboard, read its contents, and parse its values into a more usable data structure.

Reading the content of the dropped file:

For this we will use the FileStream class.  The getFileContent function takes a generic file as its only parameter; it opens a FileStream, reads the contents of the file and returns that value as a string.

Parsing the CSV file:

Finally, we are going to take the content of the CSV file, which is now in the form of a string, and parse out its data to populate an Array.  We start by using the split() function to create an Array of line items. We use character code 10, which represents carriage returns, and character code 13, which represents new lines. to separate each line item.  Then we loop through the newly created array of line items and pull out each comma separated value.  At this point we have the information we need to populate the Order object and add that to our Array.

The data pulled from the CSV file is now in a more manageable form and can be used as a dataProvider for components or to populate AIR's built in SQLite database.  Of course, in this tutorial, for simplicity's sake, we assume that the file dropped into the application is a CSV file.  In your application you should have some trapping to determine the file type and process it accordingly.

Note: An update to this post has been posted here. It provides a better solution than the one offered below, so I recommend you check it out.

Although I love Flex, it can still be a bit buggy at times. I was working with an itemRenderer the other day and came across some very odd behavior. I had a list using an itemRenderer and when the data originally loaded everything was fine, but whenever I scrolled some of the data started disappearing. You can see this demonstrated in the sample below.

Apparently, Flex likes to have all the items in a list the same height; so when an item such as the Text field in the example causes variation, Flex simply doesn't display it. I found that the easiest way to remedy the issue was to set explicit heights for the items in the renderer. Here is an example of how it works with the height explicitly set:

Now, this isn't a perfect solution. What we are doing here is effectively the same thing as setting variableRowHeight to false; thus making all the items in the List the same height. So if anybody has a better solution for this issue please let me know.