Using the Tree View control

Using the Tree View control

 

 

You can add a Tree View control to your window from the Dex Toolbox.  It’s the control on the bottom 2^nd from the right.

The control has a number of properties that are self-evident.  I will cover the ones I used in my instance.

• Object - Field:  Of course give your control a unique name, but open the Field Definition to access the Static Values for the images that are displayed in your tree.  There are two kinds of images:
  • Item Images – These are the ones that sit beside your text on the tree.  I use the
    • TreeView_FolderCollapsed – this is of course a closed folder image.
    • TreeView_FolderExpanded – this is the open or expanded folder image.
    • ToolBarCards_PBD_Up_Small – this represents the account or lowest level of my tree.
  • State Images – These are optional images that I used to designate DR or CR for my typical account balance.  I created my images with Paint using a simple 20x20 pixel image with the letters DR or CR.

Scripts: I used the following:

• Collapse:  Dex documentation recommends removing data when the tree is collapsed.  I do not.  I don’t have THAT much data in my tree.  When my tree is collapsed the data (underneath) stays put.  Dexterity handles this well and I haven’t noticed any performance issues.  What I do in this script is change the Item Image to the closed folder image (has to be done for both the Selected and Normal image.)
• Expand:  On this script I do have a script and I only add data to the tree as the user requests it.  This helps maintain performance and seems to work so far.  I also display the open folder image.
• StateClick:  As I mentioned I use the State Image to signify DR or CR of the account balance.  These images combined with the StateClick script allows the user to simply toggle the DR/CR setting by clicking on it.  I use the TreeView_SetNodeStateImage function after looking up the setting of the node they click on then change it to the other and update the underlying data.  So if the user clicks the DR image I lookup the value, change it to the other value, update the State Image then save the new value to the database.
• ContextMenu:  This is what really makes this tree shine!  I have not previously used this feature in Dexterity but it works well and I will use it more.  I will write a separate article on this but for now this allows the user to add or remove nodes as needed.

Note that to support the ContextMenu script I’ve added Commands to the Form that run when the user selects a context menu action.

This form is so simple there are no other controls on the form at this point.  The entire content of the form is the Tree View control.

There is one other action take and that is on the Window Pre script I fill the root level of the hierarchy.  I look up the root level from my table (identified there as level 1) and use the TreeView_AddNode function to populate the initial state of the hierarchy.  One side-effect of this is that if there is no data in the table the tree is blank.  There are a few actions that can be implemented to allow this type of thing, but my implementation does not involve this event so it truly represents an exception that should not happen.

Refer to the Dexterity Function Library Reference, available from the Help screen, for further information regarding the required TreeView functions you will need to implement the control.  The Programmer’s Guide Volume 2 includes information regarding implementing the control.

Here is my Hierarchy TreeView in action: