Tree belongs to the "Widgets" category and it has different look in various UI themes.

UI Theme:

Hand Drawn

Wire Frame

Windows XP


Window 7







Tree can store data with hierarchy.  To change the data in tree, just double click the Tree element.  There are two editing modes, the default one is to edit data node by node.  In this editing mode, you can add/remove node, change node height or expand/collapse certain nodes.


If you click the free_edit_button button on left top corner, you will enter the second editing mode, which allows you to edit the data for the entire tree.  In this mode, each row in the editing area is for one node in the tree. You can click the grid_editing_button button to switch back to the node editing mode.


Tree is a container element, and each node of Tree can serve as a container.  You can embed elements into any node of the tree.  The embedded element will be place at the left inside the node, and you can drag to relocate it within the tree node.


Element Specific Facilities


1.Background color
2.Alternate row background color
3.Set fill opacity with number/slider
4.Font of the text
5.Font size
6.Text color
7.Select previous/next note
8.Set note height (in pixels)
9.Show/hide tree border
10.Show/hide indent lines
11.Show/hide tree default icons
12.Set indent for each level (in pixels)
13.Whether to paint lines and small collapse/expand buttons for root nodes
14.Change icon for selected node
15.16. 17. Change state for the tree

Element Events

Element Clicked, Element Double-Clicked, Element Right-Clicked, Element Initialized, Element Hidden, Mouse Over, Mouse Out, Mouse Move, Mouse Down, Mouse Up, Key Down, Key Up, Custom Event, Selection Changed,

Element Actions

Change Visibility, Change Location, Change Size, Change State, Set Selected Index, Set Tree Node Value

Element Properties

Id, X Coordinate, Y Coordinate, Width, Height, Visible, Note

Index of the Selected Tree Item, Text of the Selected Item