Tree View Elements
- 3 minutes to read
This section lists the ASPxTreeView’s elements that you can see on a screen. Each topic contains a screenshot that outlines the specific element, and a brief overview of the element’s function.
Node
A Node represents an item within the hierarchical structure. The node content can include a check box, an image and a text.
The table below lists the main properties which affect the node content:
| Visual element | Content Members | Appearance Members |
|---|---|---|
| Check box | ASPxTreeView.AllowCheckNodes, TreeViewNode.AllowCheck | TreeViewStyles.NodeCheckBox, TreeViewNode.CheckBoxStyle, TreeViewImages.CheckBoxChecked, TreeViewImages.CheckBoxGrayed, TreeViewImages.CheckBoxUnchecked |
| Image | ASPxTreeView.Images.NodeImage, TreeViewNode.Image | TreeViewNode.Image, TreeViewNode.ImageStyle, TreeViewImages.NodeImage |
| Text | TreeViewNode.Text | TreeViewNode.TextStyle, TreeViewNode.TextTemplate, ASPxTreeView.NodeTextTemplate |
The table below lists the main properties which affect the node’s appearance:
| Characteristics | Members |
|---|---|
| Visibility | TreeViewNode.Visible |
| Appearance | ASPxTreeView.Styles, TreeViewNode.NodeStyle |
| Templates | TreeViewNode.Template, ASPxTreeView.NodeTemplate |
Node Image
Node Image represents an image displayed within a node.
The ASPxTreeView control allows you to specify an image for all nodes within ASPxTreeView or customize the particular node image. You can change the image position (on the left or on the right of text) within a node.
The table below lists the main members which affect the element’s appearance:
| Characteristics | Members |
|---|---|
| Image | TreeViewImages.NodeImage, TreeViewStyles.NodeImage, TreeViewNode.Image, TreeViewNode.ImageStyle, TreeViewImages.NodeImage |
| Position | ASPxTreeView.NodeImagePosition |
Tree Lines
Tree Lines represent the ASPxTreeView’s visual element, which serves to show links between nodes. This element can be hidden by using ASPxTreeView.ShowTreeLines property.
Note
The following themes do not display tree lines for the Tree List and Tree View controls:
- DevExpress Style
- Metropolis and Metropolis Blue
- Office 2010 (all)
- Office 365
- Office 365 Dark
- Moderno
- Mulberry
- Material
- iOS
Expand Buttons
An Expand Button is displayed if the corresponding node has children, and enables end-users to expand or collapse it.
When a node is collapsed, the expand button displays a ‘plus’ sign, indicating that the node can be expanded by clicking the button. Once a node has been expanded, the button displays a ‘minus’ sign.
You can toggle the visibility of expand buttons via the ASPxTreeView.ShowExpandButtons property. Regardless of the property value, end-users can expand or collapse nodes by double-clicking them.
The table below lists the main properties which affect the element’s appearance:
| Characteristics | Members |
|---|---|
| Visibility | ASPxTreeView.ShowExpandButtons |
| Image | TreeViewImages.ExpandButton, TreeViewImages.ExpandButtonRtl, TreeViewImages.CollapseButton, TreeViewImages.CollapseButtonRtl |
Member Table
Member Table: Expanding and Collapsing Nodes
Check Box
Check Boxes allow end-users to check/uncheck nodes. The ASPxTreeView allows you to change the appearance and visibility of all check boxes or customize a particular node’s check box.
The table below lists the main members which affect the element’s appearance:
| Characteristics | Members |
|---|---|
| Visibility | ASPxTreeView.AllowCheckNodes, TreeViewNode.AllowCheck |
| Appearance | TreeViewStyles.NodeCheckBox, TreeViewNode.CheckBoxStyle, TreeViewStyles.NodeCheckBoxFocused |
A check box can be in one of the states listed in the table below. You can specify an image for check boxes in a particular check state.
| Check Box State | Appearance | CheckState property value | Image Member |
|---|---|---|---|
| Grayed |  |
CheckState.Indeterminate | TreeViewImages.CheckBoxGrayed |
| Checked |  |
CheckState.Checked | TreeViewImages.CheckBoxChecked |
| Unchecked |  |
CheckState.Unchecked | TreeViewImages.CheckBoxUnchecked |
Member Table
Member Table: Check Box Support
Loading Panel
When the ASPxTreeView control’s ASPxTreeView.AutoPostBack property is set to false, and the ASPxTreeView.EnableCallBacks property is set to true, the first expansion of a node initiates a callback to the server to obtain the node’s child nodes. In this case, a specific Loading Panel is displayed for the child content of the node being expanded while waiting for a callback response.
Upon the TreeViewSettingsLoadingPanel.Mode property value, a loading panel can be displayed either at the center of ASPxTreeView (TreeViewLoadingPanelMode.ShowAsPopup) or near the expanding node (in place of the expand button) (TreeViewLoadingPanelMode.ShowNearNode).
| ShowAsPopup | ShowNearNode |
|---|---|
 |
 |
The table below lists the main members that affect the appearance of a Loading Panel and the way in which it functions.
Mode | |
Text | |
Image | |
Image’s Visibility | |
Image’s Position | |
Styles |