Expanding item renderers in a DataGroup or List

The spark DataGroup component is designed to take data items and pass them through an item renderer to create a visual representation of that data. In Flex 4 it is very easy to build custom item renderers.

This sample application demonstrates how you can create an item renderer that only shows some information by default and allows the user to drill down to see more information by clicking on an item or it’s associated “twisty” icon.


View Source

The main code behind this first sample is setting the visible and includeInLayout properties of the VGroup to true only when someone clicks on the item’s name. This is done by binding those properties to a CheckBox which is given a custom skin to make it look like a “twisty” icon that changes rotation based on if it is selected or not. It might seem like items that have been clicked on are now selected, but that isn’t the case. A DataGroup has no concept of selection and simply displays data.

If you would like to add selection support to this sample you will have to use the spark List component. The spark List is very similar to the DataGroup component, but it adds some additional functionality like selection and keyboard navigation. The following sample uses a spark List. You can select multiple items (or deselect them) by holding down the Control/Command key:

View Source

The renderer is slightly different in this case and a little bit simpler. There is no longer a need for a CheckBox and instead we can put the “twisty” icon directly into the renderer and set its rotation when the item renderer is in the selected state. The VGroup now uses the includeIn construct instead of the visible/includeInLayout properties.

Check out the link to the source above to see the full source code for both approaches.

Note: This sample requires Flex SDK 4.0.0.10957 or higher. You can get the latest SDK builds from opensource.adobe.com.

4 thoughts on “Expanding item renderers in a DataGroup or List”

  1. Hi,

    Im new in flex 4 world and to be honest im lost. My question is i need to simulate a datagrid with a DataGroup (because the teacher doesn’t want a Flex version 3 components)

    How could i simulate a Data Grid with data Group

    I only need (if it’s possible) a simple example where you have a Column header and i column with the data value you got it?

    Thanks

Comments are closed.