Image of Navigational Map linked to Home / Contents / Search Out on a Limb

by Brett Sheppard - GUI Computing
Image of Line Break

This new tree control from GreenTree means you won't be...

We've all seen, and probably used, tree controls before. They're a really handy way of representing everything from file systems to genealogies in a compact and easily navigable way. And there's no shortage of options out there for developers… so why another one?

DataTree from GreenTree Software is not just your average tree control - it's a powerful tool that can add extra functionality and vastly improved appearance to your applications. It provides an excellent way of displaying hierarchical data in a format that can add some interesting features that are quite easy to implement.

DataTree really does provide an efficient way to represent your data. Like any tree control it consists of a root node and cascades down displaying child nodes that can expand and contract down to many layers. But it can do more than that… the best way to explain it is with the following screen shot.

Now that's not just your average tree control! Even that "grid" is resizable by the user...

Each node can have sub-items which can display information pertaining to that node - even in grid format. You can see just how clearly and concisely data can be represented using this control - it just looks the goods, which hopefully will help you impress your users (and generate more income!). Best of all the code behind producing something like this is quite easy once you become familiar with a few basic concepts.

Each level of the tree is represented by a LevelDef object which can be used to define the look of the level such as fonts and background colors as well as setting the sort orders and column definitions.

Once you have defined your LevelDefs you can add nodes stipulating the relationship with other nodes, it's key, the text that appears on the screen and any images that are associated with it such as the bitmap of the cyclist that you can see in the above diagram. Each node can also have sub-items which are also easily added. Individual fonts and backcolors are again available and it is also possible to have images and text aligned to your own requirements.

Again, the best way to illustrate is by showing you the "mountain" of code required to produce the grid above. One note here - this is taken just about directly from the sample code, so I don't claim any ownership, but it does give you the idea.

Private Sub Form_Load()
    'First we add four leveldef objects to gttree
    'to describe what each level will look like.  
    GTTree1.LevelDefs.Add "Level0"
    GTTree1.LevelDefs.Add "Level1"
    GTTree1.LevelDefs.Add "Level2"
    GTTree1.LevelDefs.Add "Level3"
    'Make top level font bigger 
    GTTree1.LevelDefs(0).Font.Size = 14
    'On the second level set the font to be
    '12 point, bold, and green 
    GTTree1.LevelDefs(1).Font.Size = 12
    GTTree1.LevelDefs(1).Font.Bold = True
    GTTree1.LevelDefs(1).ForeColor = RGB(0, 128, 0)

    'On Level 2, turn the column captions on
    'and set the font to 8 point bold 
    GTTree1.LevelDefs(3).ColCaptionFont.Size = 8
    GTTree1.LevelDefs(3).ColCaptionFont.Bold = True
    'Level 2 will have four columns for each node. 
    GTTree1.LevelDefs(3).ColumnDefs.Add , , "Rank"
    GTTree1.LevelDefs(3).ColumnDefs.Add , , "Name"
    GTTree1.LevelDefs(3).ColumnDefs.Add , , "Country"
    GTTree1.LevelDefs(3).ColumnDefs.Add , , "Score"
    'Once the columns have been added, we can set various
    'properties on each of them.  
    GTTree1.LevelDefs(3).ColumnDefs(0).BackColor = RGB(255, 255, 192)
    GTTree1.LevelDefs(3).ColumnDefs(1).BackColor = RGB(240, 240, 240)
    GTTree1.LevelDefs(3).ColumnDefs(2).BackColor = RGB(192, 255, 192)
    GTTree1.LevelDefs(3).ColumnDefs(3).BackColor = RGB(192, 255, 255)
    GTTree1.LevelDefs(3).ColumnDefs(0).Width = 600
    GTTree1.LevelDefs(3).ColumnDefs(1).Width = 1300
    GTTree1.LevelDefs(3).ColumnDefs(2).Width = 1000
    GTTree1.LevelDefs(3).ColumnDefs(3).Width = 700
    'Set the alignment of the text in each column 
    GTTree1.LevelDefs(3).ColumnDefs(0).TextAlignment = gtTextAlignmentCenterMiddle
    GTTree1.LevelDefs(3).ColumnDefs(3).TextAlignment = gtTextAlignmentRightMiddle
    'The captions for the rank and the score column is aligned
    'to match the data that is listed below it.
    GTTree1.LevelDefs(3).ColumnDefs(0).CaptionTextAlignment = gtTextAlignmentCenterTop
    GTTree1.LevelDefs(3).ColumnDefs(3).CaptionTextAlignment = gtTextAlignmentRightTop
    'The Pictures in the Rank Column are aligned to
    'the left
    GTTree1.LevelDefs(3).ColumnDefs(0).PictureAlignment = gtPictureAlignmentLeftMiddle
    'Add some nodes.  
    GTTree1.Nodes.Add , , "TitleKey", "1996 Atlanta Olympics", 1, 1
    GTTree1.Nodes.Add "TitleKey", gtRelationshipChild, "BicyclingKey", "Bicycling", 2, 2
    GTTree1.Nodes.Add "TitleKey", gtRelationshipChild, "GymnasticsKey", "Gymnastics", 3, 3
    ' etc, etc   
    'Populate Nodes added in LevelDef 3
    GTTree1.Nodes("FirstPlaceKey").SubItems(1).Text = " E. Shore"
    GTTree1.Nodes("FirstPlaceKey").SubItems(2).Text = " U.S.A."
    GTTree1.Nodes("FirstPlaceKey").SubItems(3).Text = "9.985 "
    GTTree1.Nodes("FirstPlaceKey").SubItems(2).Image = 10
    ' etc, etc 
    'To show the user more of the tree by default, we expand the Title Node 
    GTTree1.Nodes("TitleKey").Expanded = True
End Sub

Another feature of DataTree is the ability to set it to "virtual" mode, where the application has to supply the data when required through a NodeDataRequest event. For example, scrolling down a form to a previously unseen portion of the tree would trigger the event. The only thing you have to be careful of is that the virtual mode can only be used as the last child node. A virtual node cannot have a child of its own. So beware.

DataTree also comes with a powerful DataTree designer. This provides a cool interface during design time which allows you to add nodes and create an image list which saves on coding time and keeps coding to a minimum.

The DataTree package also consists of an additional control called ComboTree which has all of the features of a standard combo box but also has the ability to add the functionality of the DataTree. This is a great way to save screen space as you can simply have the combo box on the form, and once selected it can display a tree similar to below. Once an item is selected, the corresponding value is shown on the combo box.

Something like this looks like there would be a fair bit of code behind it all, but with the help of the sample app, you can produce something like this in no time at all - and the learning curve is minimal. This is definitely worth checking out.

OK. Now for a couple of minor gripes. I think the manual needs a bit of work. Some pieces of it need a little bit more detail and some pieces are missing altogether. The 9 sample applications are terrific but I want detailed and complete information from a help file. Also, maybe this is just me and I am living in the dark ages but I like a paper manual. Online help is cool and I guess it is the way of the future but I just prefer being able to read along in a book while I am learning how to use new software. I know I'm not alone in this one, and I fear I might be fighting a bit of a losing battle, but it's just hard to read a help file on the train.

All in all however, DataTree is well worth a second look and as is standard today, you can download a trial version along with all the other GreenTree products from their webpage at Have a look, it's impressive.

DataTree is available from GUI Computing for $A209.

Written by: Brett Sheppard
October '97

Image of Arrow linked to Next Article
Image of Line Break