Customize datagrid to show connectivity between tasks

Question

Hey all,

I have made a program in Flex for creating simple schedules, similar to MS Project or Vico Control. I have one problem that I would like to solve. (You can see it here: OnTime Project Scheduling tool made in Flex

The tasks of the schedule are represented as Gantt Chart, for which I created a itemRenderer inside one of the rows in the DataGrid. The tasks are shown as gantt diagrams, but I would also like to show the connectivity between tasks.

Please take a look at the image below, to see what I am trying to accomplish here: (above is the image of how datagrid looks now, and below is the thing I would like to add)

Any suggestions as to how I could do this inside DataGrid's item renderer?

Thanx a lot Ladislav

Answer 1

OK, here's what you need to do.

1. In your dataProvider, have one field be an object (you should make it a class) that contains the following properties: start:Number (percentage) length:Number (percentage) index:int [optionial props isFirst:Boolean, isLast:Boolean]

2. Create an itemRenderer using a container (let's say a Canvas) and using the graphics class draw a rectangle, the left edge of which corresponds to the start property. This will be a percentage of the width of the itemRender and can be determined from the unscaledWidth in the updateDisplayList protected method of the class, which you will override. Similarly, the width of the rectangle corresponds to the length property of your object, as a percentage of the width of the Canvas. Give it any height you like.

3. Draw the connectors. Use the graphics class again to draw the horizontal lines in and out of the sides of the rectangle. Give these a constant length. Draw lines from the ends of the horizontal lines: up to 0 for the left-side one, down to this.height for the right-side one.

4. Figure out how far you need to draw the intermediate connector for it to appear to connect to the line above it. This only needs to be done for the top of the itemRenderer.

5. If isStart=true (index of object is 0), don't draw anything on the left or top of the rectangle. If isEnd=true (index of object is ArrayCollection.length -1), don't draw anything on the right or bottom.

And you're done. You will need to understand how to draw with the graphics object, but this is pretty easy and is something you should have in your repertoire anyway.