Tree Package

The Tree package provides an advanced TreeView control with numerous appearance options, extensive customization capabilities, and a databound mode that supports data binding by taking a relational data source with rows and columns (DataSet, DataView, ArrayList) and grouping the rows based on one or more specified fields.

The tree control supports both single and multinode selection modes. Users can select nodes using the mouse and keyboard ascribing to standard UI paradigms.

The tree control provides rich cues during OLE (Object Linking and Embedding) drag-and-drop for drop destinations. It also provides an alpha-blended cue cursor based on the image being dragged during drag-and-drop. All the above features are customizable and optional.

Drag Highlight Tracker Color

In the TreeViewAdvDragDrop sample the TreeViewAdvDragHighlightTracker Pen can be modified with the help of the event called TreeViewAdvDragHighlightTracker.QueryDragInsertInfo.

This property enhances the ability to change the color of the TreeViewAdvDragHighlightTracker Pen based on the current TreeViewAdv background.

Auto-Scrolling

Auto-scrolling of client area happens when the mouse is near the borders while dragging and draw selecting (multi selection).

Syncfusion architecture provides the option to specify different Tree Line styles for TreeViewAdv control.

Load On-Demand

TreeViewAdv has support for displaying large amount of data. It lets users bind trees to a huge dataset and load and expand nodes on-demand.

The ShowPlusOnExpand property affects TreeNodeAdv only if the LoadOnDemand property is set to true.

Advantages

• Keeps displaying the Plus sign on TreeNodeAdv when expanded while in LoadOnDemand mode.

• TreeViewAdv architecture allows the BeforeExpand event to get raised for a node in expanded mode when the Plus sign is clicked again enabling users to check datasource for changes

'Show Plus On Expand' In TreeViewAdv

Syncfusion architecture allows users to sort nodes at any level using the Text, CheckBox or Tag properties, or provide custom SortComparers to customize the sort-key on which sorting is performed.

An image can be drawn for each tree-node depending on its state called the "State Image'. The State Image can be placed to the Left or Right of the tree-node. This feature can be implemented using the Primitives property of the tree-node.

The height of individual nodes in the tree structure can be set to any preferred value using the Syncfusion architecture options.

The standard Plus/Minus signs for Expand/Collapse buttons in TreeViewAdv can be replaced with custom images.

Same Sign Image for All Options:

All the Plus signs can be replaced with a unique image and all Minus signs with another.

Different Image for Each Sign:

Individual images can also be assigned for the Plus and Minus signs available for each node.

A single click on the image expands or collapses the image as needed.

Syncfusion TreeViewAdv architecture provides a seamless way to consume information from hierarchical datasources such as XML fileand display them. This allows the user to bind XML data from a variety of sources such as an external XML file, a DataSet object and so on.

A tree-node can include text, left and right images, CheckBox, State Image, Option Buttons and Custom Controls. The alignment and positioning of the node contents can be specified in the Primitives Collection available for each node. The position for each node's content can be set using index property in Primitives Collection.

Syncfusion TreeViewAdv allows custom painting on each node. The BeforeNodePaint event is used to accomplish this feature.

The SelectionMode property allows users to select single or multiple nodes as required. Based on selection, drag-and-drop can be performed in TreeViewAdv.

• Single

The labels of individual tree-nodes can be edited at run-time in the TreeViewAdv. A node label being edited is illustrated below:

Set the HotTracking property to True in TreeViewAdv control and allow the TreeNodeAdv label to take on the appearance of a hyperlink on mouse hover. The Forecolor and Underline color is set to 'blue' to provide the hyperlink-like appearance to the TreeNodeAdv label.

The style architecture employed by tree control lets users define unique styles for different parts of the tree. Each node then inherits these different styles before getting rendered. The different styles users can specify in the tree by order of inheritance are:

• Global Style-defined in TreeViewAdv instance
• Child-Style defined in a parent node that applies to all immediate children of parent node
• Node Level Style-defined for nodes at a particular level in the tree
• Node Specific Style-defined in each TreeNodeAdv

In addition, users can define BaseStyles that can be inherited when defining any of the above styles.

• Check Box and Option Button The TreeviewAdv control is shown with Check boxes, Interactive Check boxes and Check State to Intermediate, and Option Buttons with EnsureDefaultOptionChild property.
• Interactive Check Box When the InteractiveCheckBoxes property is set to True, it indicates the state of the parent node's checkbox based on the checkstate of child node checkbox.
• Locking Node The TreeNodeAdv checkbox can be locked by setting the EnabledButtons property to False.
• Show Plus Minus Based on the ShowPlusMinus property the Plus/Minus sign can be displayed in TreeViewAdv. The ShowPlusMinus property is illustrated below:

TreeNodeAdv Features

The appearance of the tree in Essential Tools TreeViewAdv is enhanced by these exclusive features:

• Gutter Space

The GutterSpace property behaves like a left-margin of the TreeViewAdv. It indicates the space available on the left side of the control.

• Indent

This property indicates the positioning of a child-node with reference to a parent-node.

• Full Row Select

The FullRowSelect property sets a value indicating the selection highlight span-width of the TreeViewAdv control.

• Line Color

LineColor property changes the color of lines connecting nodes of the TreeViewAdv control.

TreeViewAdv Features

The TreeView control lets users create complex and rich trees with numerous appearance options and an inheritable style architecture. Nodes can display unique StateImages based on the node's expansion state and multiple Left and Right images when the LeftImagePadding and RightImagePadding properties are enabled.

The powerful ImagePadding feature allows you to create distance between the Node image and text.

The Left and Right Images will be displayed on either side of the node text.

Left Image and 'Left Image Padding' Property

Right Image with 'Right Image Padding' Property

• Text Color

The TextColor of the TreeNodeAdv can be changed according to the TreeViewAdv control's background color. This can be achieved by changing the TextColor property of the selected node.

• Help Text

It retrieves the node specific helpText and helps display this information to the user. HelpText acts as an alternative to Tooltip.

• Font

TreeViewAdv allows changing of the node text font as per user requirement. Different node text fonts are displayed below:

TreeNode Avd- TextColor, helpText and Font

Custom Controls can be included in the trees created using TreeNodeAdv. These custom controls can include controls such as check box, Option Button, Combo box and Calendars. This provides wider scope for both the functionality and viewing of tree nodes.

Tree-nodes are created using the TreeNodeAdv and can be displayed as check boxes. The color for these check boxes can be customized for individual nodes.

The TreeViewAdv framework provides options for including Context Menus which can be displayed when a tree-node is right-clicked.