Friday, April 24, 2009

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.

    15 comments:

    shadowfist said...

    Thank you very much. This is just what I was looking for.

    hsTed said...

    nice. thanks.

    said...

    Thanks!!!!

    Anonymous said...

    Thanks you very much..this is what i was looking for...Flex should have provided this by default...

    Anonymous said...

    Great component you've made. I'd like to do this same thing using the spark MXTreeItemRenderer. I was curious if you have by any chance created a spark compatible version.
    Thanks

    Chris Callendar said...

    I've now posted a Flex 4 version which uses the MXTreeItemRenderer class. There might be a better way to do it, but my way was the easiest since the code was already written.
    Chris

    Vinod said...

    Amazing!

    Alan Anderson said...

    Do you have a Spark version for the AdvancedDataGrid?

    Chris Callendar said...

    Hi Alan,

    I've updated my Flex 4/Spark Tree Lines example to show an AdvancedDataGrid with tree lines.

    Chris

    Amit said...

    Great example...
    Thanks a ton....:)

    Keep scripting...

    Amit
    India

    jase21 said...

    In your TreeItemLinesRenderer Style has 'name' metadata missing.
    It should be like:
    [Style(name="lineThickness", type="Number", format="Length", inherit="no")]

    jase21 said...

    Wow! Awesome example!!
    Thanks.

    Anonymous said...

    Very nice, this is just what I'm looking for but how do I download the script for the Flex 4 version?
    I find a working download link on the page.

    Chris Callendar said...

    If you right click on the "Flex 4/Spark Version" example above, you can go View Source On the new page you can either copy and paste the code directly, or you can click the Download source link in the bottom left corner.

    Chris

    Anonymous said...

    thanks