TreeViewComponent

1 Oct 202520 minutes to read

TreeView component is used to represent the hierarchical data in tree like structure with advanced functions to perform edit, drag and drop, selection with check-box and more.

<ej-treeview allowDragAndDrop='true'></ej-treeview>

Properties

allowDragAndDrop boolean

Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
desktop, hold the mouse on the node, drag it to the target node and drop the node by releasing
the mouse. For touch devices, drag and drop operation is performed by touch, touch move
and touch end. For more information on drag and drop nodes concept, refer to
Drag and Drop.

Defaults to false

allowEditing boolean

Enables or disables editing of the text in the TreeView node. When allowEditing property is set
to true, the TreeView allows you to edit the node by double clicking the node or by navigating to
the node and pressing F2 key. For more information on node editing, refer
to Node Editing.

Defaults to false

allowMultiSelection boolean

Enables or disables multi-selection of nodes. To select multiple nodes:

  • Select the nodes by holding down the Ctrl key while clicking on the nodes.
  • Select consecutive nodes by clicking the first node to select and hold down the Shift key
    and click the last node to select.
    For more information on multi-selection, refer to
    Multi-Selection.

Defaults to false

allowTextWrap boolean

Enables or disables text wrapping when text exceeds the bounds in the TreeView node.
When the allowTextWrap property is set to true, the TreeView node text content will wrap to the next line
when it exceeds the width of the TreeView node.
The TreeView node height will be adjusted automatically based on the TreeView node content.

Defaults to false

animation NodeAnimationSettingsModel

Specifies the type of animation applied on expanding and collapsing the nodes along with duration.

Defaults to {expand: { effect: ‘SlideDown’, duration: 400, easing: ‘linear’ },collapse: { effect: ‘SlideUp’, duration: 400, easing: ‘linear’ }}

autoCheck boolean

Allow us to specify the parent and child nodes to get auto check while we check or uncheck a node.

Defaults to true

checkDisabledChildren boolean

Determines whether the disabled children will be checked or not if their parent is checked.

Defaults to true

checkOnClick boolean

Specifies whether the item should be checked or unchecked when the node is clicked.

Defaults to false

checkedNodes string[]

The checkedNodes property is used to set the nodes that need to be checked.
This property returns the checked nodes ID in the TreeView component.
The checkedNodes property depends upon the value of showCheckBox property.
For more information on checkedNodes, refer to
checkedNodes.

<div id="tree"></div>
let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
showCheckBox: true,
checkedNodes: ['01-01','02']
});
treeObj.appendTo('#tree');

Defaults to []

cssClass string

Specifies one or more than one CSS classes to be added with root element of the TreeView to help customize the appearance of the component.

<div id="tree"></div>
let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
cssClass: 'e-custom e-tree'
});
treeObj.appendTo('#tree');
.e-custom .e-tree {
max-width: 600px;
}
.e-custom .e-list-item {
padding: 10px 0;
}

Defaults to ’’

disabled boolean

Specifies a value that indicates whether the TreeView component is disabled or not.
When set to true, user interaction will not be occurred in TreeView.

Defaults to false

dragArea HTMLElement|string

Specifies the target in which the draggable element can be moved and dropped.
By default, the draggable element movement occurs in the page.

<div id="tree"></div>
let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
dragArea: '.control_wrapper'
});
treeObj.appendTo('#tree');
.control_wrapper {
width: 500px;
margin-left: 100px;
}

Defaults to null

enableHtmlSanitizer boolean

Specifies whether to display or remove the untrusted HTML values in the TreeView component.
If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.

<div id="tree"></div>
let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
enableHtmlSanitizer: true
});
treeObj.appendTo('#tree');

Defaults to true

enablePersistence boolean

Enables or disables persisting TreeView state between page reloads. If enabled, following APIs will persist.

  1. selectedNodes - Represents the nodes that are selected in the TreeView component.
  2. checkedNodes - Represents the nodes that are checked in the TreeView component.
  3. expandedNodes - Represents the nodes that are expanded in the TreeView component.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

expandOn ExpandOnSettings

Specifies the action on which the node expands or collapses.
The available actions :
Click - The expand/collapse operation happens when you single-click on the node in desktop.
DblClick - The expand/collapse operation happens when you double-click on the node in desktop.
None - The expand/collapse operation will not happen.
In mobile devices, the node expand/collapse action happens on single tap.
Here ExpandOn attribute is set to single click property also can use double click and none property.

<div id="tree"></div>
let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
expandOn: 'Click'
});
treeObj.appendTo('#tree');

Defaults to ‘Auto’

expandedNodes string[]

Represents the expanded nodes in the TreeView component. We can set the nodes that need to be
expanded or get the ID of the nodes that are currently expanded by using this property.

<div id='tree'></div>
<script>
var treeObj =  new TreeView({
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
expandedNodes: ['01','01-01','02']
});
treeObj.appendTo('#tree');
</script>

Defaults to []

fields FieldsSettingsModel

Specifies the data source and mapping fields to render TreeView nodes.

Defaults to {id: ‘id’, text: ‘text’, dataSource: [], child: ‘child’, parentID: ‘parentID’, hasChildren: ‘hasChildren’, expanded: ‘expanded’, htmlAttributes: ‘htmlAttributes’, iconCss: ‘iconCss’, imageUrl: ‘imageUrl’, isChecked: ‘isChecked’, query: null, selected: ‘selected’, tableName: null, tooltip: ‘tooltip’, navigateUrl: ‘navigateUrl’}

fullRowNavigable boolean

If this property is set to true, then the entire TreeView node will be navigate-able instead of text element.

Defaults to false

fullRowSelect boolean

On enabling this property, the entire row of the TreeView node gets selected by clicking a node.
When disabled only the corresponding node’s text gets selected.
For more information on Fields concept, refer to
Fields.

Defaults to true

loadOnDemand boolean

By default, the load on demand (Lazy load) is set to true. By disabling this property, all the tree nodes are rendered at the
beginning itself.

Defaults to true

nodeTemplate string|object

Specifies a template to render customized content for all the nodes. If the nodeTemplate property
is set, the template content overrides the displayed node text. The property accepts template string
template string
or HTML element ID holding the content. For more information on template concept, refer to
Template.

Defaults to null

selectedNodes string[]

Represents the selected nodes in the TreeView component. We can set the nodes that need to be
selected or get the ID of the nodes that are currently selected by using this property.
On enabling allowMultiSelection property we can select multiple nodes and on disabling
it we can select only a single node.
For more information on selectedNodes, refer to
selectedNodes.

<div id="tree"></div>
let treeObj: TreeView = new TreeView({
fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
allowMultiSelection: true,
selectedNodes: ['01','02']
});
treeObj.appendTo('#tree');

Defaults to []

showCheckBox boolean

Indicates that the nodes will display CheckBoxes in the TreeView.
The CheckBox will be displayed next to the expand/collapse icon of the node. For more information on CheckBoxes, refer to
CheckBox.

Defaults to false

sortOrder SortOrder

Specifies a value that indicates whether the nodes are sorted in the ascending or descending order,
or are not sorted at all. The available types of sort order are,

  • None - The nodes are not sorted.
  • Ascending - The nodes are sorted in the ascending order.
  • Descending - The nodes are sorted in the ascending order.

Defaults to ‘None’

Methods

addNodes

Adds the collection of TreeView nodes based on target and index position. If target node is not specified,
then the nodes are added as children of the given parentID or in the root level of TreeView.

| Parameter | Type | Description |
|——|——|————-|
| nodes | ` { : }[] | Specifies the array of JSON data that has to be added. | | target (*optional*) | string &#124; Element | Specifies ID of TreeView node/TreeView node as target element. | | index (*optional*) | number | Specifies the index to place the newly added nodes in the target element. | | preventTargetExpand (*optional*) | boolean` | If set to true, the target parent node will be prevented from auto expanding. |

Returns void

beginEdit

Editing can also be enabled by using the beginEdit property, instead of clicking on the
TreeView node. On passing the node ID or element through this property, the edit textBox
will be created for the particular node thus allowing us to edit it.

Parameter Type Description
node string | Element Specifies ID of TreeView node/TreeView node.

Returns void

checkAll

Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes
as argument to this method.

Parameter Type Description
nodes (optional) string[] | Element[] Specifies the array of TreeView nodes ID/array of TreeView node.

Returns void

collapseAll

Collapses all the expanded TreeView nodes. You can collapse specific nodes by passing array of nodes as argument to this method.
You can also collapse all the nodes excluding the hidden nodes by setting excludeHiddenNodes to true. If you want to collapse
a specific level of nodes, set level as argument to collapseAll method.

Parameter Type Description
nodes (optional) string[] | Element[] Specifies the array of TreeView nodes ID/ array of TreeView node.
level (optional) number TreeView nodes will collapse up to the given level.
excludeHiddenNodes (optional) boolean Whether or not to exclude hidden nodes of TreeView when collapsing all nodes.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.

Returns void

disableNodes

Disables the collection of nodes by passing the ID of nodes or node elements in the array.

Parameter Type Description
nodes string[] | Element[] Specifies the array of TreeView nodes ID/array of TreeView nodes.

Returns void

enableNodes

Enables the collection of disabled nodes by passing the ID of nodes or node elements in the array.

Parameter Type Description
nodes string[] | Element[] Specifies the array of TreeView nodes ID/array of TreeView nodes.

Returns void

ensureVisible

Ensures visibility of the TreeView node by using node ID or node element.
When many TreeView nodes are present and we need to find a particular node, ensureVisible property
helps bring the node to visibility by expanding the TreeView and scrolling to the specific node.

Parameter Type Description
node string | Element Specifies ID of TreeView node/TreeView nodes.

Returns void

expandAll

Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes
as argument to this method. You can also expand all the collapsed nodes by excluding the hidden nodes by setting
excludeHiddenNodes to true to this method. To expand a specific level of nodes, set level as argument to expandAll method.

Parameter Type Description
nodes (optional) string[] | Element[] Specifies the array of TreeView nodes ID/array of TreeView nodes.
level (optional) number TreeView nodes will expand up to the given level.
excludeHiddenNodes (optional) boolean Whether or not to exclude hidden nodes when expanding all nodes.
preventAnimation (optional) boolean Prevent the expand animation when expanding all nodes.

Returns void

getAllCheckedNodes

Gets all the checked nodes including child, whether it is loaded or not.

Returns string[]

getDisabledNodes

Gets all the disabled nodes including child, whether it is loaded or not.

Returns string[]

getNode

Gets the node’s data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it’s ID.

Parameter Type Description
node string | Element Specifies ID of TreeView node/TreeView node.

Returns * *{ : }**

getTreeData

To get the updated data source of TreeView after performing some operation like drag and drop, node editing,
node selecting/unSelecting, node expanding/collapsing, node checking/unChecking, adding and removing node.

  • If you pass the ID of TreeView node as arguments for this method then it will return the updated data source
    of the corresponding node otherwise it will return the entire updated data source of TreeView.
  • The updated data source also contains custom attributes if you specified in data source.
Parameter Type Description
node (optional) string | Element Specifies ID of TreeView node/TreeView node.

Returns * { : }[]*

moveNodes

Moves the collection of nodes within the same TreeView based on target or its index position.

Parameter Type Description
sourceNodes string[] | Element[] Specifies the array of TreeView nodes ID/array of TreeView node.
target string | Element Specifies ID of TreeView node/TreeView node as target element.
index number Specifies the index to place the moved nodes in the target element.
preventTargetExpand (optional) boolean If set to true, the target parent node will be prevented from auto expanding.

Returns void

refreshNode

Refreshes a particular node of the TreeView.

Parameter Type Description
target string | Element Specifies the ID of TreeView node or TreeView node as target element.
newData ` { : }[]` Specifies the new data of TreeView node.

Returns void

removeNodes

Removes the collection of TreeView nodes by passing the array of node details as argument to this method.

Parameter Type Description
nodes string[] | Element[] Specifies the array of TreeView nodes ID/array of TreeView node.

Returns void

uncheckAll

Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes
as argument to this method.

Parameter Type Description
nodes (optional) string[] | Element[] Specifies the array of TreeView nodes ID/array of TreeView node.

Returns void

updateNode

Replaces the text of the TreeView node with the given text only when the allowEditing property is enabled.

Parameter Type Description
target string | Element Specifies ID of TreeView node/TreeView node as target element.
newText string Specifies the new text of TreeView node.

Returns void

Events

actionFailure EmitType<FailureEventArgs>

Event callback that is raised while any TreeView action failed to fetch the desired results.

created EmitType<Object>

Event callback that is raised when the TreeView component is created successfully.

dataBound EmitType<DataBoundEventArgs>

Event callback that is raised when data source is populated in the TreeView.

dataSourceChanged EmitType<DataSourceChangedEventArgs>

Event callback that is raised when data source is changed in the TreeView. The data source will be changed after performing some operation like
drag and drop, node editing, adding and removing node.

destroyed EmitType<Object>

Event callback that is raised when the TreeView control is destroyed successfully.

drawNode EmitType<DrawNodeEventArgs>

Event callback that is raised before the TreeView node is appended to the TreeView element. It helps to customize specific nodes.

keyPress EmitType<NodeKeyPressEventArgs>

Event callback that is raised when key press is successful. It helps to customize the operations at key press.

nodeChecked EmitType<NodeCheckEventArgs>

Event callback that is raised when the TreeView node is checked/unchecked successfully.

nodeChecking EmitType<NodeCheckEventArgs>

Event callback that is raised before the TreeView node is to be checked/unchecked.

nodeClicked EmitType<NodeClickEventArgs>

Event callback that is raised when the TreeView node is clicked successfully.

nodeCollapsed EmitType<NodeExpandEventArgs>

Event callback that is raised when the TreeView node collapses successfully.

nodeCollapsing EmitType<NodeExpandEventArgs>

Event callback that is raised before the TreeView node collapses.

nodeDragStart EmitType<DragAndDropEventArgs>

Event callback that is raised when the TreeView node drag (move) starts.

nodeDragStop EmitType<DragAndDropEventArgs>

Event callback that is raised when the TreeView node drag (move) is stopped.

nodeDragging EmitType<DragAndDropEventArgs>

Event callback that is raised when the TreeView node is dragged (moved) continuously.

nodeDropped EmitType<DragAndDropEventArgs>

Event callback that is raised when the TreeView node is dropped on target element successfully.

nodeEdited EmitType<NodeEditEventArgs>

Event callback that is raised when the TreeView node is renamed successfully.

nodeEditing EmitType<NodeEditEventArgs>

Event callback that is raised before the TreeView node is renamed.

nodeExpanded EmitType<NodeExpandEventArgs>

Event callback that is raised when the TreeView node expands successfully.

nodeExpanding EmitType<NodeExpandEventArgs>

Event callback that is raised before the TreeView node is to be expanded.

nodeSelected EmitType<NodeSelectEventArgs>

Event callback that is raised when the TreeView node is selected/unselected successfully.

nodeSelecting EmitType<NodeSelectEventArgs>

Event callback that is raised before the TreeView node is selected/unselected.