Flex 3.0 (Moxie) beta is out and I am sure most of you would have started playing around with the cool new features of Moxie. <mx:AdvancedDataGrid> is the new, improved DataGrid – a super cool component in moxie. Its a very exciting moment for me because I was part of the engineering team that designed and developed this control :) . I spent a few hours yesterday to see if I can use this control to write a simple Gantt chart, given the fact that the AdvancedDataGrid lets you have column spanned itemRenderers , groupedColumns and hierarchical display. I took a similar approach to what Doug had done in his example of a gantt chart.

This is what I got!! :)

ADG-Gantt sample

This is a rough prototype that I wrote and I sure dint spend much time designing this application. I will try and get this one as a component when I have a little more of free time.

Things I loved about AdvancedDataGrid doing this small app :)

  • AdvancedDataGrid Rocks!
  • The new groupingCollection APIs make hierarchical display of data Child’s play
  • The rendererProviders property and the column spanning lets you customize itemRenderers in a much advanced way than DataGrid
  • <mx:AdvancedDataGridColumnGroup> lets you group the columns seamlessly!

The horizontal scrolling is a little slow, but we are sure working on it to get it a lot faster than what it is now! (hey, its just a beta!)

You can download the source code from here.[Adobe Share] If you cant figure out much from the data, its just a timeline of set of tasks and their respective percentages. Red shows delayed. Orange shows delayed start, green shows timely completion, grey - not yet started and blue – in progress.

The code that I have written requires many rounds of cleaning up before I can share it publicly :p (I will do that soon!). In the meanwhile, do check this space for a new series of tips & tricks and tutorials on working with the new AdvancedDataGrid.

All of ya keep flexing your “moxie” till then!