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.
6 Comments
Cool. FYI, if you open say, the first three rows and a scrollbar shows up, the scrollbar doesn't work. If the scrollbar is the result of non-consecutive open rows the scollbar appears to still work.
Posted by: Ben | February 2, 2007 11:00 AM
Yeah, I believe that's actually a Flex 2 bug with variable row height lists...
Posted by: darron | February 2, 2007 11:06 AM
That's a neat application.... I'd vote for removing the vertical line in the background when you open a row--but close enough. I do have two other comments:
1--why not make the circle's area proportional to the total? When I look at Sally vs. Suzy Sally's circle is way bigger and makes the image inaccurate. Maybe this wasn't really your point... but I do think with a few refinements like this, the "tree datagrid with graph" could be more useful.
2--I'm seriously trying to like Flex but when I hear something like "it's a Flex bug" I cringe. Now, I realize you probably didn't do this thinking you'd fix every bug you encountered... but what do people do on real projects when this sort of thing pops up? Do they dig into the framework to fix it? I've seen many Flex apps that were on the verge of being very cool, but suffer tons of little compromises that were either bad design or issues with the framework the developer couldn't overcome. So, to be clear, I'm not saying you couldn't fix it--I'm just curious what MOST people do who are using Flex: they leave it (not an option for most of my clients); call Adobe and get a fix promptly (that'd be awesome--couldn't ask for more); hack in there to fix it (sounds tricky); workaround (not ideal); other?
Posted by: Phillip Kerman | February 2, 2007 11:44 AM
Hi Philip,
1 -- The point wasn't to create a "tree with a graph inside", but rather create a datagrid that allowed for *any* component to be displayed when you click on the disclosure icon. That kind of customization (sizing the pie charts relative to their "total" value) would have to be done in the renderer itself, and shouldn't be part of the AdvancedDataGrid. It just displays whatever renderer you tell it to.
2 -- Because my AdvancedDataGrid extends DataGrid, it's possible to fix by just overriding the base class functionality. The source code to the framework is included, so I can see what the DataGrid is doing and make the necessary changes. My personal approach is to first file a bug at adobe.com/go/wish, then see if anyone else has encountered the problem on mailing lists/forums/blogs, then create my own fix for it if I need to, or ask flexcoders/flexcomponents for help if I get stuck.
If you have a support contract with Adobe, that you can report an issue you're having and their support team will work to find you a workaround and fix the problem.
Posted by: darron | February 2, 2007 12:01 PM
Cool. I think your answer to #2 is the best/most complete I've heard.
However, I am going to assume that in the cases of Flex apps I've seen which include whacky issues (that I believe to be undesireable) the developer simply didn't bother to investigate a solution or--just as bad--didn't notice the issue in the first place.
I'll have to check out the way the support contract works. Sounds awesome if they commit to definitely working to get you a fix or workaround.
Posted by: Phillip Kerman | February 2, 2007 12:31 PM
It looks like a French Flex developer has re-created this component on their own and released an example as open source:
http://www.aufondagauche.net/aufondagauche/index.php?2007/03/27/5-datagridextended-un-datagrid-permettant-le-deploiement-de-sous-conteneurs
Posted by: darron | April 3, 2007 11:49 AM