Interface for a class TreeView
Event callback that is raised while any TreeView action failed to fetch the desired results.
EmitType<Object>
Event callback that is raised when the TreeView component is created successfully.
Event callback that is raised when data source is populated in the TreeView.
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.
EmitType<Object>
Event callback that is raised when the TreeView control is destroyed successfully.
Event callback that is raised before the TreeView node is appended to the TreeView element. It helps to customize specific nodes.
EmitType<NodeKeyPressEventArgs>
Event callback that is raised when key press is successful. It helps to customize the operations at key press.
Event callback that is raised when the TreeView node is checked/unchecked successfully.
Event callback that is raised before the TreeView node is to be checked/unchecked.
Event callback that is raised when the TreeView node is clicked successfully.
Event callback that is raised when the TreeView node collapses successfully.
Event callback that is raised before the TreeView node collapses.
EmitType<DragAndDropEventArgs>
Event callback that is raised when the TreeView node drag (move) starts.
EmitType<DragAndDropEventArgs>
Event callback that is raised when the TreeView node drag (move) is stopped.
EmitType<DragAndDropEventArgs>
Event callback that is raised when the TreeView node is dragged (moved) continuously.
EmitType<DragAndDropEventArgs>
Event callback that is raised when the TreeView node is dropped on target element successfully.
Event callback that is raised when the TreeView node is renamed successfully.
Event callback that is raised before the TreeView node is renamed.
Event callback that is raised when the TreeView node expands successfully.
Event callback that is raised before the TreeView node is to be expanded.
Event callback that is raised when the TreeView node is selected/unselected successfully.
Event callback that is raised before the TreeView node is selected/unselected.
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.
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.
boolean
Enables or disables multi-selection of nodes. To select multiple nodes:
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.
Specifies the type of animation applied on expanding and collapsing the nodes along with duration.
boolean
Allow us to specify the parent and child nodes to get auto check while we check or uncheck a node.
boolean
Determines whether the disabled children will be checked or not if their parent is checked.
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'); 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;
} 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.
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;
} 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'); boolean
Enables or disables persisting TreeView state between page reloads. If enabled, following APIs will persist.
selectedNodes - Represents the nodes that are selected in the TreeView component.checkedNodes - Represents the nodes that are checked in the TreeView component.expandedNodes - Represents the nodes that are expanded in the TreeView component. boolean
Enable or disable rendering component in right to left direction.
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'); 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>Specifies the data source and mapping fields to render TreeView nodes.
boolean
If this property is set to true, then the entire TreeView node will be navigate-able instead of text element.
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.
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.
string | function
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.
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'); 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.
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.