Custom Tree

This component is used to build custom tree structure.

Public Variables (Properties)

[?]

The Custom Tree component has the following basic properties and property groups that are common to all components:

Name, Advanced Properties, Container Properties, Styles, Preloader, Events, Bindings.

Label

Text of the tree header.

Variable Name:	treeLabel
Records:	1

Record Format:

Field Name	Field Type	Field Description
treeLabel	String	Label

Tree Data

This property defines hierarchy and visual representation of tree nodes.

Variable Name:	treeData
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
key	String	Key. Unique key for the node.
title	String	Title. Displayed name of the node.
nodeStyleId	String	Node Style. The unique ID for the CSS style to apply to the node. This field must match ID field of Node Style property.
parent	Data Table	Parent Key. Indicates the ID of the parent node.
Class Name	className	Class Name. Name of the custom CSS class to assign to each `<li>` of the tree.

Selected Nodes

This property defines which tree nodes will be selected.

Variable Name:	selectedNodes
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
key	String	Key. The unique key of tree node to select.

Expanded Nodes

This property defines which tree nodes will be expanded. Expanded node must have at least one child node.

Variable Name:	expandedNodes
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
key	String	Key. The unique key of tree node to expand.

Checked Nodes

This property defines which tree nodes will be checked by default. The Enable Checkboxes property should be enabled for this property usage.

Note that checked nodes differ from selected nodes. Each node can be checked and/or selected independently.

Variable Name:	checkedNodes
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
key	String	Key. The unique key of tree node to check.

Filterable

If enabled, allows filtering data using an integrated search field located in the topmost part of the tree component. Tree nodes that match the search request will be highlighted.

Variable Name:	filterable
Records:	1

Record Format:

Field Name	Field Type	Field Description
filterable	Boolean	Filterable

Placeholder

The text displayed when there is no other text in the search field.

Variable Name:	inputPlaceholder
Records:	1

Record Format:

Field Name	Field Type	Field Description
inputPlaceholder	String	Placeholder

Multiple Selection

If enabled, allows multiple nodes to be selected.

Variable Name:	multiple
Records:	1

Record Format:

Field Name	Field Type	Field Description
multiple	Boolean	Multiple Selection

Tree Style

This property defines visual representation of different tree components.

Variable Name:	treeStyle
Records:	1

Record Format:

Field Name	Field Type	Field Description
folderImage	Data Block	Folder Image. The image for the folder (a node with child nodes) icon.
fileImage	Data Block	File Image. The image for the file (a node without child nodes) icon.
switcherOpenedImage	Data Block	Opened Switcher Image. The image for the opened switcher icon.
switcherClosedImage	Data Block	Closed Switcher Image. The image for the closed switcher icon.

Node Style

This property defines visual representation of different tree nodes.

Variable Name:	nodeStyle
Records:	0..unlimited

Record Format:

Field Name	Field Type	Field Description
id	String	ID. The unique ID of the node style preset.
folderImage	Data Block	Folder Image. The image for the folder (a node with child nodes) icon.
fileImage	Data Block	File Image. The image for the folder (a node without child nodes) icon.
switcherOpenImage	Data Block	Open Switcher Image. The image for the open switcher icon.
swicherCloseImage	Data Block	Close Switcher Image. The image for the closed switcher icon.

Enable Checkboxes

If enabled, adds checkboxes to tree nodes.

Variable Name:	checkable
Records:	1

Record Format:

Field Name	Field Type	Field Description
checkable	Boolean	Enable Checkboxes

Filter Button Image

The image for the Filter button.

Variable Name:	filterButtonImage
Records:	1

Record Format:

Field Name	Field Type	Field Description
imageType	Integer	Choose whether to use data from the imageData field or the imageURL field. 0 - Image Data 1 - URL
imageData	Data Block	Image data.
imageUrl	String	Image URL.

Define items to be displayed in the context menu. When a menu item is clicked and its condition expression evaluates to True a ContextMenuClick@ event will be generated.

Variable Name:	treeContextMenu
Records:	1

Record Format:

Field Name	Field Type	Field Description
name	String	Name to identify the menu item. Passed to the ContextMenuClick@ event as `itemId`.
description	String	Description of the item displayed in the menu.
icon	Data Block	Item icon to display in the menu.
condition	String	Expression to be evaluated when the context menu item is chosen. If the expression evaluates to `False` the event ContextMenuClick@ will not fire.
		Resolution Environment:
		Default Context	None.
		Default Data Table	Data table with one field `key`, indicating the key of the node which was clicked.
		Default Row	0
		Environment Variables	Standard variables and `key`, the key of the node which was clicked to open the context menu.

Nodes Partial Loading

Enables partial loading of nodes. When a tree has more nodes than the number of items specified in Items Count for Partial Loading, nodes will be loaded up to the specified item count. The interface graphically indicates if a tree was partially loaded, and gives the user the option to load more nodes.

Variable Name:	lazyLoadEnabled
Records:	1

Record Format:

Field Name	Field Type	Field Description
lazyLoadEnabled	Boolean	Enables partial loading of nodes when set to `True`.

Items Count for Partial Loading

Initial number of nodes to be loaded when Nodes Partial Loading is enabled.

Variable Name:	lazyLoadLimit
Records:	1

Record Format:

Field Name	Field Type	Field Description
lazyLoadLimit	Integer

Header Style

The CSS style to be applied to the header text.

Variable Name:	styleTreeHeaderLabel
Records:	1

Record Format:

Field Name	Field Type	Field Description
styleTreeHeaderLabel	String	Header Style

The CSS style to be applied to the header container.

Variable Name:	styleTreeHeaderLabelContainer
Records:	1

Record Format:

Field Name	Field Type	Field Description
styleTreeHeaderLabelContainer	String	Header Container Style

Component Location

Determines the location and size of new windows (components) opened through users interacting with the Custom Tree.

See Component Location for details on this property’s format and behavior.

Public Events

[?]

Node Selection

This event fires when the user selects any tree node and returns the key value of the selected node, and the value of its parent node.

Event Name:	treeSelection
Records:	1

Record Format:

Field Name	Field Type	Field Description
key	String	Key value of the selected node.
parent	String	Key value of the parent of the selected node.

Fires when the user selects an item from the context menu and the condition of the item evaluates to True.

Event Name:	contextMenuClick
Records:	1

Record Format:

Field Name	Field Type	Field Description
key	String	Key value of the selected node.
itemId	String	Name of the selected context menu item.

Node Check

Fired when a node is checked or unchecked. Returns a table with all currently checked nodes.

Event Name:	treeNodeCheck
Records:	1…Unlimited

Record Format:

Field Name	Field Type	Field Description
key	String	Key value of the checked node.
parent	String	Key value of the parent of the checked node.

Node Expand

Fired when a node is expanded or collapsed.

Event Name:	treeNodeExpand
Records:	1

Record Format:

Field Name	Field Type	Field Description
key	String	Key value of the expanded or collapsed node.
parent	String	Key value of the parent of the expanded or collapsed node.

Tree Data Changed

Fires when there is a change in the Tree Data variable which resulting in different tree data. Returns the number elements of the tree, even if the new tree has the same number of nodes as the previous tree.

Event Name:	treeDataChanged
Records:	1

Record Format:

Field Name	Field Type	Field Description
size	Integer	Number of nodes in the Tree Data variable.

DPF_EXPORT_V5.8.8 / TIME_1743710535 / 2025-04-03 20:02:15 / STRLEN_31555 / STRLEN_HTML_35710

{VERSION}

Was this page helpful?

Custom Tree

Public Variables (Properties)

Label

Tree Data

Selected Nodes

Expanded Nodes

Checked Nodes

Filterable

Placeholder

Multiple Selection

Tree Style

Node Style

Enable Checkboxes

Filter Button Image

Context Menu

Nodes Partial Loading

Items Count for Partial Loading

Header Style

Header Container Style

Component Location

Public Events

Node Selection

Context Menu Click

Node Check