• Home
  • /Posts Tagged 'Flex 3'

Posts Tagged ‘Flex 3’

List, ItemRenderer, toolTip… oh my!

On my latest project, I was going through several areas of the application adding toolTips to make some of the data that is clipped visible if desired. In doing so, I found out that I needed to use a combination of the different types of tips available.

Most components have a toolTip property that you can set (typically bound to some data). But the List-based components are a little different. They use dataTipField and the dataTipFunction. The “data” version of toolTips is based on the list iterating through it’s dataProvider and then adding toolTip for each row.

So, while adding toolTips to a List with an itemRenderer, I ran into a problem. My toolTips weren’t showing up when I set the dataTipField. The dataTipFunction didn’t work either. What gives?!

Well, I had an inline itemRenderer for my list. And apparently the List doesn’t like adding toolTips, via the dataTipField, to a component that is inline.

The solution: Simply add a toolTip to the inline component. And in my case, bind it to the data property that is passed in by the list.

Note: You don’t even need to set showDataTips to true.

Flex 3 AdvancedDataGrid Summary Divider

The AdvancedDataGrid (ADG) control in Adobe Flex 3 extends the capabilities of the standard DataGrid control to improve data visualization. You can:

  • Sort by multiple columns when you click in the column header
  • Use the
    styleFunction

    property to specify a function to apply styles to rows and columns of the control

  • Use an expandable navigation tree in a column to control the visible rows of the control
  • Collect multiple columns under a single column heading
  • Span multiple columns with an item renderer and use multiple item renderers in the same column

Working in a combination of these features to create something new was fun. I wanted to create a summary row for a group, but I didn’t want any of the tree structure to be shown. More like a divider between my grouped data. Here’s the basic example:

I started out with just a simple ADG that grouped by a column. Grouped data is flat data that you arrange in a hierarchy for display.

To group data, you specify one or more data fields that collect the data into the hierarchy using the GroupingCollection class as the dataProvider for the ADG. The
refresh()

method applies the settings of the GroupingCollection class to the data. You must call this method any time you modify the GroupingCollection class. Since I was calling a groupingFunction to group my data, I call
refresh()

on initialize of the ADG.

By default, GroupLabel is the field name for the data items added to the flat data to create the hierarchy. We’ll use this for our summary row divider.

That gave me a tree structure in the display. Next I added a renderProvider

…

I’m going to go ahead an post this up, I should be able to complete the rest of the description later.