The TreeGrid Control for Flex 2

The TreeGrid Control is a Flex™ 2 control. Conceptually it is a Tree control for displaying tree-like data structures. Operationally, it looks and behaves more like a mx:DataGrid. Internally, the TreeGrid control consists of a mx:Tree and a mx:DataGrid, resulting in a number of advantages:

1. All mx:Tree and mx:DataGrid features are readily available, such as drag-and-drop, renderer and editor, skins and events, etc.
2. Small footprint. This control is an aggremeration of the two native controls; it does more wiring than feature implementation.
3. It is very programmable with familiar programming interface.

The following is an example:

<r1:TreeGrid dataProvider="{myDataProvider}"
    color="#0000FF" allowMultipleSelection="true"
    dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
    editable="true">
  <r1:columns>
    <r1:TreeColumn headerText="Name" labelField="@id"/>
    <mx:DataGridColumn headerText="Class" dataField="@class"/>
    <mx:DataGridColumn headerText="Lookup" dataField="@lookup"/>
  </r1:columns>
</r1:TreeGrid>

The implementation is not short of challenges. Currently there is still a major issue regarding scrolling. However, it does not affect the programming aspect, and hopefully this issue will be resolved in due time.

The download includes everything you see on this site (plus the SWC file), including complete documentation and all the samples.

The current release of the TreeGrid Control is 1.0-beta.

Links

Documentation:
 API ASDoc
 Readme

Samples:
 UseTreeGrids.swf    (snapshot | mxml | all)
 ProgramTreeGrids.swf    (snapshot | mxml | all)

Download:
 treegrid-1.0-beta.zip    (700K)

Contact/feedback:
 Web Form