I've created a new DataGrid component, one that I call the AdvancedDataGrid, that let's you do some amazing things with data hierarchies in Flex 2.
A picture is worth a thousand words, so check out the AdvancedDataGrid demo that I put together here.
What you're looking at is essentially a DataGrid with the additional concept of a row renderer. I didn't actually call it that, but you can set the nestedChildFactory property to any item renderer that you want. When you click the disclosure arrow to expand a row, that renderer is drawn across the entire grid.
In the example, I'm drawing a PieChart and binding the data provider of the chart to the detail column of the data in the row being rendered. The effect is pretty cool: a pie chart nested inside of a DataGrid that shows/hides based on the disclosure state.
Here's a code snippet for defining the nested child:
<controls:AdvancedDataGrid
id="advancedGrid"
dataProvider="{dp}"
width="100%"
height="100%"
sortableColumns="false">
<!-- The component for the detail view -->
<controls:nestedChildFactory>
<mx:Component>
<mx:VBox height="200" width="100%">
<mx:PieChart dataProvider="{data.detail}"
width="100%"
height="100%"
showDataTips="true">
<mx:series>
<mx:PieSeries labelPosition="callout" field="amount"
labelFunction="outerDocument.displayLabel" />
</mx:series>
</mx:PieChart>
</mx:VBox>
</mx:Component>
</controls:nestedChildFactory>
<!-- The columns for the master view -->
<controls:columns>
<mx:DataGridColumn dataField="name" headerText="Name" />
<mx:DataGridColumn dataField="total" headerText="Total" />
</controls:columns>
</controls:AdvancedDataGrid>
This approach offers a lot of flexibility. You can nest children until your heart is content (i.e. create an AdvancedDataGrid as a nested child of another AdvancdedDataGrid, and so on down the line). You can even do some fun things like create a TabNavigator inside of a DataGrid and offer advanced editing screens inside of the row that you're editing.
The component was inspired by The XtraGrid Suite for .NET. Everything you see in those screenshots should be possible in Flex now as well.
Unfortunately, this isn't something that I can release the source for. It was built specifically for a client of mine. However, a thread surfaced recently on FlexComponents about this type of component. Since I've been sitting on this code for awhile, I thought it was a good time for show and tell. I wanted to show that this type of effect is in fact possible and demonstrate just how extensible the Flex 2 framework is.
Alex Harui gives a good introduction for building a component like this on your own. I highly recommend the FlexComponents mailing list if you're interested in custom component development.
