Tree Lines

In Flex I've seen how you can configure Trees by changing the disclosure (expand/collapse) icon, the folder/leaf icons, background colors, indentation, etc. But I've never seen the option for rendering tree lines like you can in Java, C# and most other languages.

I've created a custom TreeItemRenderer that does renderer tree lines. It has these properties:

<ui:TreeItemLinesRenderer
Styles
lineAlpha="1"
lineColor="#808080"
lineThickness="1"
lineStyle="dotted"/>

And here is an example of it in action (right click to view source):


If you know of any other solutions out there I'd be interested to see them.

** September 28th 2009 Updated **
I've added another example application showing how to render tree lines in an AdvancedDataGrid control.

Flex Example Application

AdvancedDataGrid API

AdvancedDataGridGroupItemRenderer API

Flex 4/Spark Version
Here is a very similar version written in Flex 4. It uses a lot of the same code, but uses a Spark item renderer instead. There is probably a much nicer way to do this using the new Spark Path or Line controls, but since the code was already written I went with this solution.

An example of tree lines in an AdvancedDataGrid with a Flex 4 itemRenderer is on my newer blog post.