Tree View Elements

Jun 16, 2022
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	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).