Harish Sivaramakrishnan

on technology, music & life.

Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie)

61 comments

Update: Do check out the Flex 4 prototype of of the gantt chart here.

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!

Short URL: http://is.gd/LX83bY

Written by harish

June 13th, 2007 at 12:29 pm

61 Responses to 'Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie)'

Subscribe to comments with RSS or TrackBack to 'Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie)'.

  1. [...] Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie) 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 […] [...]

  2. Awesome Bro… cool stuff

    Raghu

    14 Jun 07 at 4:35 am

  3. [...] Read more here.  [...]

  4. when do you think you will be able to share the code. This is exactly what i have been looking for?

    Sean Scott

    22 Jun 07 at 4:56 am

  5. [...] using AdvancedDataGrid (moxie) June 28, 2007 Posted by vodka in flex. trackback Few days back I had posted an example of a Gantt chart component developed using the AdvancedDataGrid of moxie. I was playing around with [...]

  6. This is what we need for our project, if we can’t find or build it in Flex we must do this project in swing. Please send me the source code, we don’t care for the “unclean” code, but will give us a point to get started.

    Johan

    18 Sep 07 at 11:49 am

  7. May you share with us the code of the app?
    I’d like to see the source code to compare with Doug’s source.
    Thanks!

    Santiago

    13 Oct 07 at 4:11 am

  8. Nice code ! I am really interesting by your source, when you post it ?? Especially about the group support (I try to do the same in an advanceddatagrid but I fail ;-( )

    Post your code even if it’s not as clean as your expect ;-)

    Thks you so much

    Tom

    23 Oct 07 at 9:29 am

  9. Hiii,

    It seems to be cool feature added in moxie.

    I have created treeGrid with database dirven records structure, & added few link buttons for some cells to show more meta-data per cell.

    This component will help me more to customized in all ways.

    Thanks,
    Prashant D Shelke.

    Prashant D Shelke.

    4 Dec 07 at 1:15 pm

  10. Is there any way to group rows as well? I can appreciate grouping columns but for some of my visuals I would like to be able to group chunks of rows.

    ie.

    – -
    -<
    – -
    - – -

    James

    7 Dec 07 at 4:26 am

  11. I have been reading your articles now for a while and they look great, thanks for sharing them. I’ve learned a lot.

    Cheers

    Vincent

    The World of Office Tips and Tricks.

  12. Never mind the slow scrolling, this app could save us tons of time on projects. Thanks for the hard work!

    Clare Dupp

    17 Jan 08 at 6:25 pm

  13. This is a great tool for managing data when we are operating multiple projects at once. I appreciate the work you put in.

    Clare

    18 Jan 08 at 6:22 am

  14. When you’re ready to unveil that cleaned up code, I think we’d all like to see it. This seems like an extremely useful tool for coordinating ongoing projects.

    Jonathan

    18 Jan 08 at 6:43 am

  15. [...] meanwhile I got several comments, mails and even angry remarks for posting the source code of the gantt chart / task scheduler chart that I had posted here a few months back. Thanks for the interest shown, [...]

  16. it’s good if you can post the source code.

    Dave John

    9 Feb 08 at 4:23 am

  17. Yes, very interresting ! I works on a similar approach, but I’m also a flex beginer … thanks in advance for the source code.

    David

    14 Mar 08 at 8:08 am

  18. Hi,
    Can u post the source code. I really need it. Thanks. :)

    nadh

    25 Mar 08 at 4:38 am

  19. I’d love to see the source.

    Tyler

    8 May 08 at 4:09 pm

  20. as other examples that are based on the Flex DataGrid the bar column is not scrollable. I guess this component only supports scrolling-by-column, not …by-pixels, right? Do you know any workaround?

    kblau

    2 Jun 08 at 2:02 am

  21. See this also http://www.yutiti.com

    Rainer

    8 Jun 08 at 12:05 pm

  22. Great work..can you share the source?

    MM

    16 Jun 08 at 3:42 pm

  23. I use the flex AdvancedDataGrid

    Jesse Couch

    24 Jun 08 at 6:17 pm

  24. Tht’s really cool and great :) . Can you please send me the source code for this? I am egar to use and do some additional things in it if possible :D .

    Thanx in advance

    Hrushi

    11 Jul 08 at 8:10 am

  25. Have you seen yutiti http://www.yutiti.com Gantt chart?

    eli

    21 Jul 08 at 8:09 pm

  26. Hi there, I’m having problems accessing the example.
    Is it still up there?
    Thanks a lot
    Damian

    Damian

    15 Aug 08 at 5:10 pm

  27. Hello, can you send me the source code? I’m a beginner of using flex =)

    YaNa

    21 Aug 08 at 2:11 am

  28. Hi Vodka,

    This is just great!. I would love to see how you implemented it.
    Could you please kindly send me the source code as well?

    I would greatly appreciate it.

    Thanks

    Vicky

    2 Sep 08 at 5:38 pm

  29. Hi, could you please send me the source code? It’s great job but I just couldn’t test it.
    Thanks a lot.

    Jim

    20 Sep 08 at 5:42 pm

  30. Hi, great work, could you please also send me the source? Thank you :)

    savage

    25 Sep 08 at 6:05 pm

  31. Looks good; similar to what ILOG Elixr is doing, but for free! Could you send me the source as well?

    Thanks in advance!

    Adam

    1 Oct 08 at 7:28 pm

  32. hi, the application looks great.
    i’d love to see the application in action.
    could you send me the source, please?
    thanks a lot.

    mish

    2 Oct 08 at 1:40 pm

  33. Your application astonishes me.
    If you do not mind, I would like to refer to your source for my project.
    Please share your source with me.

    Thank you

    Kim

    23 Oct 08 at 7:13 am

  34. Hai,
    The application is too great…
    If u dont mind, please share your source with me.

    Thank you

    Praj4821

    18 Nov 08 at 4:12 am

  35. Awesome Work Dear

    If it is possible for you, can you please Share the Codes Because I was looking for some thing Related to this .

    Thanks & Regards
    Vivek Manchanda

    Vivek Manchanda

    24 Nov 08 at 8:36 am

  36. HELLO
    WOULD YOU SEND ME WITH EMAIL SOURCE OF “Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie)”
    I VEREY VERY IN DANGER

    MOJGAN

    30 Nov 08 at 10:27 am

  37. That’s really AWESOME !

    I was looking for a gantt chart a bit more sophisticated than Doug’s One, and your’s just seems perfect.

    Could you send me the source code for the Gantt that we can see in screenshot please ?
    (The source code link does not provide the same ganttchart)

    Thanks in advance
    Regards

    Jeremy

    9 Dec 08 at 11:21 am

  38. I love your post!

    I’m going to echo the request of so many others and ask that you email your source code :)

    Thanks for all of your hard work.

    Regards

    Matthew

    16 Dec 08 at 11:08 pm

  39. Hi !

    Could you please share the Source Code for this Gantt using

    Advance Data Grid in Flex 3.0.

    If you share it, its really helpful for me.

    And advance Thanks for you …

    My mail id is : walkwithsabari@gmail.com

    Sabari@Flex

    2 Jan 09 at 6:41 am

  40. Hi,
    this will be very helpful for me, could you please share the source code ?
    Thanks.

    Dave

    9 Jan 09 at 12:51 am

  41. Hi,

    It is just great. Could you please share the source code?

    Thanks,

    Jon

    Jon

    13 Jan 09 at 6:09 pm

  42. Hi
    An excellent innovative code. Please if you can send me a modified code in such a way so that it is flexible for any given time period of a task. And please send me the modified code as soon as possible immediately as a help.

    Thanks.

    zameer.

    zameer

    22 Jan 09 at 4:16 am

  43. [...] days back I had posted an example of a Gantt chart component developed using the AdvancedDataGrid of moxie. I was playing around with [...]

  44. [...] I got several comments, mails and even angry remarks for not posting the source code of the gantt chart / task scheduler chart that I had posted here a few months back. Thanks for the interest shown, [...]

  45. [...] check out my Simple Gantt chart built on [...]

  46. [...] I found the Doug’s post about the gantt chart component and flexgeek post (with doug’s same approach). this seemed a good option and actually started to develop it on [...]

  47. hi! can i also get a source code for this one? we really need it in our project. thanks! btw this is my e-mail ad: mon_star88@yahoo.com

    mon

    24 Jun 09 at 9:17 pm

  48. Looks like you are not interested in sharing the source code…….Anyway very nice work…

    Santhosh

    3 Jul 09 at 3:04 pm

  49. The code looks good, after spending time digging around I am unable to determine how to update the display once the contents of the array collection is changed.

    Any help would be appreciated.

    Thanks

    sneeo

    22 Oct 09 at 2:22 am

  50. Sneeo:

    Let me take a look and get back to you.

    Harish

    admin

    27 Oct 09 at 2:29 pm

  51. hi! can i also get a source code for this one? we really need it in our project. thanks! btw this is my e-mail ad: bjk8472@naver.com

    Baek JongKeun

    11 Nov 09 at 1:59 pm

  52. I hope you will provide us for the source code in someday. We are looking forward for that. Thank you for the good article.

  53. You can download the source from here – http://blog.flexgeek.in/storage/GanttApp.zip

    Harish Sivaramakrishnan

    23 Dec 09 at 11:09 am

  54. In your source, file GanttComponent.mxml is empty, are you sure that is normal ?

    Shino

    30 Mar 10 at 3:18 pm

  55. You wouldn’t need that one to use the actual component.

    Harish Sivaramakrishnan

    30 Mar 10 at 3:37 pm

  56. Very Nice Work !!

    You’re Gantt chart looks very useful !
    Doug’s one was already awesome, but yours seems to be a little more advanced!
    Could you send me the source code for the Gantt that we can see in screenshot please ?
    (The source code link does not provide the same ganttchart)

    Thanks a lot !

    Best regards

    Krazymins

    13 Apr 10 at 8:04 pm

  57. Hi, this is kishore. I am a trainee. I was given a task that , i need to insert shapes in the textarea. Suppose if i add a shape(cirlce) and if i click on the rectangle then the circle shoul be converted to rectangle shape. Could tuo please help me regarding this. I am trying it since one week, but i couldn;t move forward

    KishorePendyala

    23 Apr 10 at 10:19 am

  58. hi

    i have a requirement like using strike for text area text(line through) .could u please help me how to use strike for text area text

    Srinivas


  59. Sean Scott:

    when do you think you will be able to share the code. This is exactly what i have been looking for?


    Srinivas Chowdary:

    hi
    i have a requirement like using strike for text area text(line through) .could u please help me how to use strike for text area text
    Srinivas


    Srinivas Chowdary:

    hi
    i have a requirement like using strike for text area text(line through) .could u please help me how to use strike for text area text
    Srinivas


    Srinivas Chowdary:

    hi
    i have a requirement like using strike for text area text(line through) .could u please help me how to use strike for text area text
    Srinivas


    Srinivas Chowdary:

    hi
    i have a requirement like using strike for text area text(line through) .could u please help me how to use strike for text area text
    Srinivas


    Srinivas Chowdary:

    hi
    i have a requirement like using strike for text area text(line through) .could u please help me how to use strike for text area text
    Srinivas

    Adchilles

    6 May 10 at 6:04 pm

  60. It seems like the first post was in 2007, and I see above it was mentioned that it will be available as a component to use. Is it available and not posted on this blog?

    jaroos

    19 Nov 10 at 10:32 pm

Leave a Reply