ejTreeView
25 Oct 201724 minutes to read
The TreeView can be easily configured with the DOM element, such as div or ul. you can create a TreeView with a highly customizable look and feel.
| Name | Type | Description |
|---|---|---|
| options | object | settings for TreeView. |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
}
</script>Requires
-
module:jQuery
-
module:jquery.easing.1.3.js
-
module:ej.core.js
-
module:ej.treeview.js
-
module:ej.data.js
-
module:ej.checkbox.js
-
module:ej.waitingpopup.js
-
module:ej.draggable.js
Members
allowDragAndDrop boolean
Gets or sets a value that indicates whether to enable drag and drop a node within the same tree.
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowDragAndDrop:boolean = true;
}
</script>allowDragAndDropAcrossControl boolean
Gets or sets a value that indicates whether to enable drag and drop a node in inter ej.TreeView.
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowDragAndDropAcrossControl]='allowDragAndDropAcrossControl'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowDragAndDrop:boolean = true;
public allowDragAndDropAcrossControl:boolean = true;
}
</script>allowDropSibling boolean
Gets or sets a value that indicates whether to drop a node to a sibling of particular node.
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowDropSibling]='allowDropSibling'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowDragAndDrop:boolean = true;
public allowDropSibling:boolean = true;
}
</script>allowDropChild boolean
Gets or sets a value that indicates whether to drop a node to a child of particular node.
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowDropChild]='allowDropChild'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowDragAndDrop:boolean = true;
public allowDropChild:boolean = true;
}
</script>allowEditing boolean
Gets or sets a value that indicates whether to enable node editing support for TreeView.
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowEditing]='allowEditing'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowDragAndDrop:boolean = true;
public allowEditing:boolean = true;
}
</script>allowKeyboardNavigation boolean
Gets or sets a value that indicates whether to enable keyboard support for TreeView actions like nodeSelection, nodeEditing, nodeExpand, nodeCollapse, nodeCut and Paste.
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [allowKeyboardNavigation]='allowKeyboardNavigation'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowKeyboardNavigation:boolean = true;
}
</script>allowMultiSelection boolean
Gets or sets a value that indicates whether to enable multi selection support for TreeView.
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [allowMultiSelection]='allowMultiSelection'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowMultiSelection:boolean = true;
}
</script>autoCheck boolean
Allow us to specify the parent and child nodes to get auto check while we check or uncheck a node.
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [autoCheck]='allowMultiSelection' [showCheckbox]='showCheckbox'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public autoCheck:boolean = true;
public showCheckbox:boolean = true;
}
</script>autoCheckParentNode boolean
Allow us to specify the parent node to be retain in checked or unchecked state instead of going for indeterminate state.
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [autoCheckParentNode]='autoCheckParentNode' [showCheckbox]='showCheckbox'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public autoCheckParentNode:boolean = true;
public showCheckbox:boolean = true;
}
</script>checkedNodes array
Gets or sets a value that indicates the checkedNodes index collection as an array. The given array index position denotes the nodes, that are checked while rendering TreeView.
Default Value
- []
Example
<ej-treeview id="treeView" [fields]='field' [checkedNodes]='checkedNodes' [showCheckbox]='showCheckbox'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public checkedNodes:number = [1,2];
public showCheckbox:boolean = true;
}
</script>cssClass string
Sets the root CSS class for TreeView which allow us to customize the appearance.
Default Value
- ””
Example
<ej-treeview id="treeView" [fields]='field' [cssClass]='cssClass'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public cssClass:string = "gradient-lime";
}
</script>enableAnimation boolean
Gets or sets a value that indicates whether to enable or disable the animation effect while expanding or collapsing a node.
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [enableAnimation]='enableAnimation'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public enableAnimation:boolean = true;
}
</script>enabled boolean
Gets or sets a value that indicates whether a TreeView can be enabled or disabled. No actions can be performed while this property is set as false
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [enabled]='enabled'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public enabled:boolean = true;
}
</script>enableMultipleExpand boolean
Allow us to prevent multiple nodes to be in expanded state. If it set to false, previously expanded node will be collapsed automatically, while we expand a node.
Default Value
- true
Example
<ej-treeview id="treeView" [fields]='field' [enableMultipleExpand]='enableMultipleExpand'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public enableMultipleExpand:boolean = true;
}
</script>enablePersistence boolean
Sets a value that indicates whether to persist the TreeView model state in page using applicable medium i.e., HTML5 localStorage or cookies
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [enablePersistence]='enablePersistence'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public enablePersistence:boolean = true;
}
</script>enableRTL boolean
Gets or sets a value that indicates to align content in the TreeView control from right to left by setting the property as true.
Default Value
- false
Example
<div id="treeView"></div>
<script>
// Initialize the TreeView with the enableRTL value specified.
$("#treeView").ejTreeView({
fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
enableRTL: true
});
</script><ej-treeview id="treeView" [fields]='field' [enableRTL]='enableRTL'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public enableRTL:boolean = true;
}
</script>expandedNodes array
Gets or sets a array of value that indicates the expandedNodes index collection as an array. The given array index position denotes the nodes, that are expanded while rendering TreeView.
Default Value
- []
Example
<ej-treeview id="treeView" [fields]='field' [expandedNodes]='expandedNodes'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public expandedNodes:number = [0,7];
}
</script>expandOn string
Gets or sets a value that indicates the TreeView node can be expand or collapse by using the specified action.
Default Value
- “dblclick”
Example
<ej-treeview id="treeView" [fields]='field' [expandOn]='expandOn'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public expandOn:string ="dblclick";
}
</script>fields object
Gets or sets a fields object that allow us to map the data members with field properties in order to make the data binding easier.
Default Value
- null
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
}
</script>fields.child object
It receives the child level or inner level data source such as Essential DataManager object and JSON object.
<div id="treeView"></div>
<script>
// Initialize the TreeView with the fields value specified.
$("#treeView").ejTreeView({
fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" ,
child:{
dataSource:window.childData, id:"id",parentId:"parentTd", text: "name"
}
}
});
</script>fields.dataSource object
It receives Essential DataManager object and JSON object.
To know more details about dataSource , please click here
fields.expanded string
Specifies the node to be in expanded state.
fields.hasChild string
Its allow us to indicate whether the node has child or not in load on demand
fields.htmlAttribute object
Specifies the HTML Attributes to “li” item list.
fields.id string
Specifies the id to TreeView node items list.
fields.imageAttribute object
Specifies the image attribute to “img” tag inside items list
fields.imageUrl string
Specifies the HTML Attributes to “li” item list.
fields.isChecked string
If its true Checkbox node will be checked when rendered with checkbox.
fields.linkAttribute object
Specifies the link attribute to “a” tag in item list.
fields.parentId string
Specifies the parent id of the node. The nodes are listed as child nodes of the specified parent node by using its parent id.
fields.query object
It receives query to retrieve data from the table (query is same as SQL).
To know more details to add the query, please click here
fields.selected string
Allow us to specify the node to be in selected state
fields.spriteCssClass string
Specifies the sprite CSS class to “li” item list.
fields.tableName string
It receives the table name to execute query on the corresponding table.
fields.text string
Specifies the text of TreeView node items list.
To know more details about treeview fields, please click here
fullRowSelect boolean
Gets or sets a value that indicates whether to enable full row selection support for TreeView.
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [fullRowSelect]='fullRowSelect'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public fullRowSelect:boolean = true;
}
</script>height string number
Defines the height of the TreeView.
Default Value
- Null
Example
<ej-treeview id="treeView" [fields]='field' [height]='height'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public height:number = 300;
}
</script>htmlAttributes object
Specifies the HTML Attributes for the TreeView. Using this API we can add custom attributes in TreeView control.
Default Value
- {}
Example
<ej-treeview id="treeView" [fields]='field' [htmlAttributes]='htmlAttributes'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public htmlAttributes:Object = {class:"my-class"};
}
</script>loadOnDemand boolean
Specifies the child nodes to be loaded on demand
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [loadOnDemand]='loadOnDemand'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public loadOnDemand:boolean = true;
}
</script>selectedNode number
Gets or Sets a value that indicates the index position of a tree node. The particular index tree node will be selected while rendering the TreeView.
Default Value
- -1
Example
<ej-treeview id="treeView" [fields]='field' [selectedNode]='selectedNode'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public selectedNode:number = 2;
}
</script>selectedNodes array
Gets or sets a value that indicates the selectedNodes index collection as an array. The given array index position denotes the nodes, that are selected while rendering TreeView.
If we enable the allowMultiSelection property then it will select TreeView node of all given array indexes otherwise it will select TreeView node of the first index from the given array.
Default Value
- []
Example
<ej-treeview id="treeView" [fields]='field' [allowMultiSelection]='allowMultiSelection' selectedNodes='selectedNodes'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public allowMultiSelection:boolean = true;
public selectedNodes:number =[1,2];
}
</script>showCheckbox boolean
Gets or sets a value that indicates whether to display or hide checkbox for all TreeView nodes.
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public showCheckbox:boolean = true;
}
</script>sortSettings object
By using sortSettings property, you can customize the sorting option in TreeView control.
sortSettings.allowSorting boolean
Enables or disables the sorting option in TreeView control
Default Value
- false
Example
<ej-treeview id="treeView" [fields]='field' [sortSettings]='sortSettings'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public sortSettings:Object ={allowSorting: true};
}
</script>sortSettings.sortOrder enum
Sets the sorting order type. There are two sorting types available, such as “ascending”, “descending”.
| Name | Description |
|---|---|
| Ascending | Enum for Ascending sort order |
| Descending | Enum for Descending sort order |
Default Value
- ej.sortOrder.Ascending
Example
<ej-treeview id="treeView" [fields]='field' [sortSettings]='sortSettings'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public sortSettings:Object ={allowSorting: true,sortOrder: ej.sortOrder.Descending};
}
</script>template string
Allow us to use custom template in order to create TreeView.
Default Value
- null
Example
<ej-treeview id="template" [fields]="field" cssClass="custom">
<ng-template #nodeTemplate="" let-data="">
<div>
<img class="eimage" src="src/treeview/Employees/.png" alt=""/>
<div class="ename"></div>
<div class="ejob"></div>
</div>
</ng-template>
</ej-treeview><script>
export class TreeViewComponent {
public localData: Object[] = [
{ id: 1, name: 'Steven Buchanan', eimg: '10', job: 'CEO', hasChild: true, expanded: true },
{ id: 2, pid: 1, name: 'Laura Callahan', eimg: '2', job: 'Product Manager', hasChild: true },
{ id: 3, pid: 2, name: 'Andrew Fuller', eimg: '7', job: 'Team Lead', hasChild: true },
{ id: 4, pid: 3, name: 'Anne Dodsworth', eimg: '1', job: 'Developer' },
{ id: 5, pid: 1, name: 'Nancy Davolio', eimg: '4', job: 'Product Manager', hasChild: true },
{ id: 6, pid: 5, name: 'Michael Suyama', eimg: '9', job: 'Team Lead', hasChild: true },
{ id: 7, pid: 6, name: 'Robert King', eimg: '8', job: 'Developer ' },
{ id: 8, pid: 7, name: 'Margaret Peacock', eimg: '6', job: 'Developer' },
{ id: 9, pid: 1, name: 'Janet Leverling', eimg: '3', job: 'HR' },
];
public field:Object ={ dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
}
<script>width string|number
Defines the width of the TreeView.
Default Value
- Null
Example
<ej-treeview id="treeView" [fields]='field' [width]='width'></ej-treeview><script>
export class TreeViewComponent {
public hierarchicalData: Object[] = [
{ id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: 'Windows NT' },
{ id: '01-01-02', name: 'Windows Mail' },
{ id: '01-01-03', name: 'Windows Photo Viewer' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
public width:number = 300;
}
</script>Methods
addNode(newNodeText, target)
To add a Node or collection of nodes in TreeView. If target tree node is specified, then the given nodes are added as child of target tree node, otherwise nodes are added in TreeView.
| Name | Type | Description |
|---|---|---|
| newNodeText | string|object | New node text or JSON object |
| target | string|object | ID of TreeView node/object of TreeView node |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
// Create Treeview control object
var treeObj = $("#treeView").data("ejTreeView");
treeObj.addNode("NodeNew", "book"); // First argument is new node text and it will be appended as child of node, which node is having ID book.
</script>addNodes(collection, target)
To add a collection of nodes in TreeView. If target tree node is specified, then the given nodes are added as child of target tree node, otherwise nodes are added in TreeView.
| Name | Type | Description |
|---|---|---|
| collection | object|Array | New node details in JSON object |
| target | string|object | ID of TreeView node/object of TreeView node |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.addNodes(obj, "book"); // First argument is new nodes object in Array and this will be appended as child of node, which node is having ID book.
</script>checkAll()
To check all the nodes in TreeView.
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.checkAll(); // All the TreeView nodes will be checked.
</script>checkNode(element)
To check a node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.checkNode($("#book")); // // Given TreeView node will be checked.
</script>collapseAll([levelUntil],[excludeHiddenNodes])
This method is used to collapse all nodes in TreeView control. If you want to collapse all nodes up to the specific level in TreeView control then we need to pass levelUntil as argument to this method.
If you want to collapse all nodes except the hidden nodes then we need to pass excludeHiddenNodes as true to this method.
If you want to collapse all nodes up to the specific level except the hidden nodes then we need to pass levelUntil and excludeHiddenNodes as arguments to this method.
| Name | Type | Description |
|---|---|---|
| levelUntil | number | TreeView nodes will collapse until the given level |
| excludeHiddenNodes | boolean | Weather exclude the hidden nodes of TreeView while collapse all nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.collapseAll(); // All the TreeView nodes will be collapsed.
treeObj.collapseAll(2); // All the TreeView nodes up to level 2 will be collapsed.
treeObj.collapseAll(null, true); // All the Treeview nodes except hidden nodes will be collapsed.
treeObj.collapseAll(2, true); // All the Treeview nodes except hidden nodes will be collapsed up to the level 2.
</script>collapseNode(element)
To collapse a particular node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node|object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.collapseNode($("#book")); // Given TreeView node will be collapsed.
</script>disableNode(element)
To disable the node in the TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.disableNode($("#book")); // Given TreeView node will be disabled and child nodes also disabled.
</script>enableNode(element)
To enable the node in the TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.enableNode($("#book")); // Given TreeView node will be enabled and child nodes also enabled.
</script>ensureVisible(element)
To ensure that the TreeView node is visible in the TreeView. This method is useful if we need select a TreeView node dynamically.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
// Given TreeView node is present in TreeView, then the tree is expanded and scrolled automatically to ensure that the current tree node is visible in the TreeView.
treeObj.ensureVisible($("#book"));
</script>expandAll([levelUntil],[excludeHiddenNodes])
This method is used to expand all nodes in TreeView control. If you want to expand all nodes up to the specific level in TreeView control then we need to pass levelUntil as argument to this method.
If you want to expand all nodes except the hidden nodes then we need to pass excludeHiddenNodes as true to this method.
If you want to expand all nodes up to the specific level except the hidden nodes then we need to pass levelUntil and excludeHiddenNodes as arguments to this method.
| Name | Type | Description |
|---|---|---|
| levelUntil | number | TreeView nodes will expand until the given level |
| excludeHiddenNodes | boolean | Weather exclude the hidden nodes of TreeView while expand all nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.expandAll(); // All the TreeView nodes will be expanded.
treeObj.expandAll(2); // All the TreeView nodes up to the level 2 will be expanded.
treeObj.expandAll(null, true); // All the Treeview nodes except hidden nodes will be expanded.
treeObj.expandAll(2, true); // All the Treeview nodes except hidden nodes will be expanded up to the level 2.
</script>expandNode(element)
To expandNode particular node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.expandNode($("#book")); // Given TreeView node will be expanded.
</script>getCheckedNodes()
To get currently checked nodes in TreeView.
Returns:
object
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getCheckedNodes(); // All checked TreeView nodes will be returned.
</script>getCheckedNodesIndex()
To get currently checked nodes indexes in TreeView.
Returns:
array
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getCheckedNodesIndex(); // All checked TreeView nodes indexes will be returned as array.
</script>getChildren(element, [includeNestedChild])
This method is used to get immediate child nodes of a node in TreeView control. If you want to get the all child nodes include nested child nodes then we need to pass includeNestedChild as true along with element arguments to this method.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
| includeNestedChild | boolean | Weather include nested child nodes of TreeView node |
Returns:
array
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getChildren("book"); // return all immediate child nodes of node ("book") in TreeView as array.
treeObj.getChildren($("#book"), true); // return all child nodes include nested child nodes of node ("book") in TreeView as array.
</script>getNodeCount()
To get number of nodes in TreeView.
Returns:
number
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNodeCount(); // It will return the TreeView nodes count.
</script>NOTE
“getCount” method name has been renamed as “getNodeCount”
getExpandedNodes()
To get currently expanded nodes in TreeView.
Returns:
object
Example
<ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getExpandedNodes(); // All expanded TreeView nodes will be returned.
</script>getExpandedNodesIndex()
To get currently expanded nodes indexes in TreeView.
Returns:
array
Example
<ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getExpandedNodesIndex(); // All expanded TreeView nodes indexes will be returned as array.
</script>getNodeByIndex(index)
To get TreeView node by using index position in TreeView.
| Name | Type | Description |
|---|---|---|
| index | number | Index position of TreeView node |
Returns:
object
Example
<ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNodeByIndex(3); // It will return the TreeView node of specified index.
</script>getNode(element)
To get TreeView node data such as id, text, parentId, selected, checked, expanded, level, childes and index.
| Name | Type | Description |
|---|---|---|
| element | string/object | ID of TreeView node/object of TreeView node |
Returns:
object
Example
<ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNode($("#book")); // Given TreeView node details will be returned as JSON object.
</script>getNodeIndex(element)
To get current index position of TreeView node.
| Name | Type | Description |
|---|---|---|
| element | string/object | ID of TreeView node/object of TreeView node |
Returns:
number
Example
<ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNodeIndex($("#book")); // Given TreeView node index position will be returned.
</script>getParent(element)
To get immediate parent TreeView node of particular TreeView node.
| Name | Type | Description |
|---|---|---|
| element | string/object | ID of TreeView node/object of TreeView node |
Returns:
object
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getParent($("#book")); // It will return the immediate parent TreeView node of given TreeView node.
</script>getSelectedNode()
To get the currently selected node in TreeView.
Returns:
object
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNode(); // Currently selected TreeView node will be returned.
</script>getSelectedNodes()
To get the currently selected nodes in TreeView.
Returns:
array
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNodes(); // Currently selected TreeView nodes will be returned as array.
</script>getSelectedNodeIndex()
To get the index position of currently selected node in TreeView.
Returns:
number
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNodeIndex(); // Currently selected TreeView node index position will be returned.
</script>getSelectedNodesIndex()
To get the index positions of currently selected nodes in TreeView.
Returns:
array
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNodesIndex(); // Currently selected TreeView nodes index positions will be returned as array.
</script>getText(element)
To get the text of a node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
string
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getText($("#book")); // Given TreeView node text will be returned.
</script>getTreeData([id])
To get the updated datasource of TreeView after performing some operation like drag and drop, node editing, 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 with child of specified node otherwise it will return the entire updated data source of TreeView.
You can also get the updated data source for remote data binding after performing the operation like editing, selecting/unselecting, expanding/collapsing, checking/unchecking and removing node. You cannot get the updated data source when you perform operation like drag and drop, adding node for remote data binding.
The updated data source also contains custom attributes (“ContactTitle”, “OrderID”, “EmployeeID”, “Freight”) if you return these from server.
| Name | Type | Description |
|---|---|---|
| id | string|number | ID of TreeView node |
Returns:
array
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getTreeData(); // It will return the updated data source as array of JSON object, after performing some operation.
treeObj.getTreeData("VINET"); // It will return the updated data source with child of specified node as array of JSON object, after performing some operation.
</script>getVisibleNodes()
To get currently visible nodes in TreeView.
Returns:
object
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.getVisibleNodes(); // It will return the currently visible TreeView nodes.
</script>hasChildNode(element)
To check a node having child or not.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.hasChildNode($("#book")); // It will return true, if the given TreeView node having child node's, else false.
</script>hide()
To show nodes in TreeView.
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.hide(); // It will hide all the nodes in TreeView.
</script>hideNode(element)
To hide particular node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.hideNode($("#book")); // It will hide the given TreeView node.
</script>insertAfter(newNodeText, target)
To add a Node or collection of nodes after the particular TreeView node.
| Name | Type | Description |
|---|---|---|
| newNodeText | string|object | New node text or JSON object |
| target | string|object | ID of TreeView node/object of TreeView node |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.insertAfter("NodeNew", "book"); // First argument is new node text and it will be appended after the specified TreeView node, which node is having ID book.
</script>insertBefore(newNodeText, target)
To add a Node or collection of nodes before the particular TreeView node.
| Name | Type | Description |
|---|---|---|
| newNodeText | string|object | New node text or JSON object |
| target | string|object | ID of TreeView node/object of TreeView node |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.insertBefore("NodeNew", "book"); // First argument is new node text and it will be appended before the specified TreeView node, which node is having ID book.
</script>isNodeChecked(element)
To check the given TreeView node is checked or unchecked.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.isNodeChecked($("#book")); // It will return true, if the given TreeView node is checked, else false.
</script>isChildLoaded(element)
To check whether the child nodes are loaded of the given TreeView node.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.isChildLoaded($("#book")); // It will return true, if the given TreeView node is child nodes are loaded, else false.
</script>isDisabled(element)
To check the given TreeView node is disabled or enabled.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.isDisabled($("#book")); // It will return true, if the given TreeView node is disabled, else false.
</script>isExist(element)
To check the given node is exist in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.isExist($("#book")); // It will return true, if the given node is exist in TreeView, else false.
</script>isExpanded(element)
To get the expand status of the given TreeView node.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.isExpanded($("#book")); // It will return true, if the given TreeView node is expanded, else false.
</script>isSelected(element)
To get the select status of the given TreeView node.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.isSelected($("#book")); // It will return true, if the given TreeView node is selected, else false.
</script>isVisible(element)
To get the visibility status of the given TreeView node.
| Name | Type | Description |
|---|---|---|
| element | string|object | ID of TreeView node/object of TreeView node |
Returns:
boolean
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.isVisible($("#book")); // It will return true, if the given TreeView node is visible, else false.
</script>loadData(newNodeText, target)
To load the TreeView nodes from the particular URL. If target tree node is specified, then the given nodes are added as child of target tree node, otherwise nodes are added in TreeView.
| Name | Type | Description |
|---|---|---|
| URL | string | URL location, the data returned from the URL will be loaded in TreeView |
| target | string|object | ID of TreeView node/object of TreeView node |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.loadData("myApplication/childData", "book"); // The array of JSON data returned from the given URL, will be appended as child of node, which node is having ID book.
</script>moveNode(sourceNode, destinationNode, index)
To move the TreeView node with in same TreeView. The new position of given TreeView node will be based on destination node and index position.
| Name | Type | Description |
|---|---|---|
| sourceNode | string|object | ID of TreeView node/object of TreeView node |
| destinationNode | string|object | ID of TreeView node/object of TreeView node |
| index | number | New index position of given source node |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.moveNode("#art", "#book"); // The source node(#art) will be appended as a child of destination node(book).
</script>refresh()
To refresh the TreeView
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.refresh(); // It will refresh the TreeView.
</script>removeAll()
To remove all the nodes in TreeView.
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.removeAll(); // It will remove all the nodes in TreeView.
</script>removeNode(element)
To remove a node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.removeNode($("#book")); // Given TreeView node will be removed and child nodes also removed.
</script>selectAll()
To select all the TreeView nodes when enable allowMultiSelection property.
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.selectAll(); // All the TreeView nodes will be selected.
</script>selectNode(element)
This method is used to select a node in TreeView control. If you want to select the collection of nodes in TreeView control then we need to enable allowMultiSelection property.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/ collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.selectNode($("#book")); // Given TreeView node will be selected.
treeObj.selectNode([$("#book"), "art"]); // Given TreeView nodes will be selected when enable `allowMultiSelection` property.
</script>show()
To show nodes in TreeView.
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.show(); // It will show all the nodes in TreeView.
</script>showNode(element)
To show a node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.showNode($("#book")); // It will show the given TreeView node.
</script>unCheckAll()
To uncheck all the nodes in TreeView.
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.unCheckAll(); // All the TreeView nodes will be unchecked.
</script>uncheckNode(element)
To uncheck a node in TreeView.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.uncheckNode($("#book")); // Given TreeView node will be unchecked.
</script>unselectAll()
To unselect all the TreeView nodes when enable allowMultiSelection property.
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.unselectAll(); // All the TreeView nodes will be unselected.
</script>unselectNode(element)
This method is used to unselect a node in TreeView control. If you want to unselect the collection of nodes in TreeView control then we need to enable allowMultiSelection property.
| Name | Type | Description |
|---|---|---|
| element | string|object|array | ID of TreeView node/object of TreeView node/ collection of ID/object of TreeView nodes |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.unselectNode($("#book")); // Given TreeView node will be unselected.
treeObj.unselectNode([$("#book"), "art"]); // Given TreeView nodes will be unselected when enable `allowMultiSelection` property.
</script>updateText(target, newText)
To edit or update the text of the TreeView node.
| Name | Type | Description |
|---|---|---|
| target | string|object | ID of TreeView node/object of TreeView node |
| newText | string | New text |
Example
<ej-treeview id="treeView" [fields]='field'></ej-treeview><script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.updateText("book", "NewText"); // It will update the text of the given TreeView node.
</script>Events
beforeAdd
Fires before adding node to TreeView.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| data | string/object | returns the given new node data |
| targetParent | object | returns the parent element, the given new nodes to be appended to the given parent element |
| parentDetails | object | returns the given parent node details |
Example
<ej-treeview id="treeView" [fields]='field' (beforeAdd)="onBeforeAdd($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeAdd(e: any){
// Your code here
}
}
</script>beforeCollapse
Fires before collapse a node.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| value | string | returns the value of the node |
| currentElement | object | returns the current element of the node clicked |
| isChildLoaded | boolean | returns the child nodes are loaded or not |
| id | string | returns the id of currently clicked node |
| parentId | string | returns the parent id of currently clicked node |
| async | boolean | returns the format asynchronous or synchronous |
Example
<ej-treeview id="treeView" [fields]='field' (beforeCollapse)="onBeforeCollapse($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeCollapse(e: any){
// Your code here
}
}
</script>beforeCut
Fires before cut node in TreeView.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| target | object | returns the target element, the given node to be cut |
| nodeDetails | object | returns the given target node values |
| keyCode | number | returns the key pressed key code value |
Example
<ej-treeview id="treeView" [fields]='field' (beforeCut)="onBeforeCut($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeCut(e: any){
// Your code here
}
}
</script>beforeDelete
Fires before deleting node in TreeView.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| target | object | returns the target element, the given node to be deleted |
| nodeDetails | object | returns the given target node values |
| parentElement | object | returns the current parent element of the target node |
| parentDetails | object | returns the parent node values |
| removedNodes | array | returns the currently removed nodes |
Example
<ej-treeview id="treeView" [fields]='field' (beforeDelete)="onBeforeDelete($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeDelete(e: any){
// Your code here
}
}
</script>beforeEdit
Fires before editing the node in TreeView.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| currentElement | object | returns the current element of the node clicked |
Example
<ej-treeview id="treeView" [fields]='field' (beforeEdit)="onBeforeEdit($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeEdit(e: any){
// Your code here
}
}
</script>beforeExpand
Fires before expanding the node.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| value | string | returns the value of the node |
| isChildLoaded | boolean | if the child node is ready to expanded state; otherwise, false. |
| currentElement | object | returns the current element of the node clicked |
| id | string | returns the id of currently clicked node |
| parentId | string | returns the parent id of currently clicked node |
| async | boolean | returns the format asynchronous or synchronous |
Example
<ej-treeview id="treeView" [fields]='field' (beforeExpand)="onBeforeExpand($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeExpand(e: any){
// Your code here
}
}
</script>beforeLoad
Fires before loading nodes to TreeView.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| AjaxOptions | object | returns the AJAX settings object |
Example
<ej-treeview id="treeView" [fields]='field' (beforeLoad)="onBeforeLoad($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeLoad(e: any){
// Your code here
}
}
</script>beforePaste
Fires before paste node in TreeView.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| target | object | returns the target element, the given node to be pasted |
| nodeDetails | object | returns the given target node values |
| keyCode | number | returns the key pressed key code value |
Example
<ej-treeview id="treeView" [fields]='field' (beforePaste)="onBeforePaste($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforePaste(e: any){
// Your code here
}
}
</script>beforeSelect
Fires before selecting node in TreeView.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| target | object | returns the target element, the given node to be selected |
| nodeDetails | object | returns the given target node values |
Example
<ej-treeview id="treeView" [fields]='field' (beforeSelect)="onBeforeSelect($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onBeforeSelect(e: any){
// Your code here
}
}
</script>create
Fires when TreeView created successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
Example
<ej-treeview id="treeView" [fields]='field' (create)="onCreate($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onCreate(e: any){
// Your code here
}
}
</script>destroy
Fires when TreeView destroyed successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
Example
<ej-treeview id="treeView" [fields]='field' (destroy)="onDestroy($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onDestroy(e: any){
// Your code here
}
}
</script>inlineEditValidation
Fires before nodeEdit Successful.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| newText | string | returns the new entered text for the node |
| id | object | returns the current node element id |
| oldText | string | returns the old node text |
Example
<ej-treeview id="treeView" [fields]='field' (inlineEditValidation)="onInlineEditValidation($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onInlineEditValidation(e: any){
// Your code here
}
}
</script>keyPress
Fires when key pressed successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| currentElement | object | returns the current element of the node clicked |
| value | string | returns the value of the node |
| path | string | returns node path from root element |
| keyCode | number | returns the key pressed key code value |
| isExpanded | boolean | it returns when the current node is in expanded state; otherwise, false. |
| id | string | returns the id of current TreeView node |
| parentId | string | returns the parentId of current TreeView node |
Example
<ej-treeview id="treeView" [fields]='field' (keyPress)="onKeyPress($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onKeyPress(e: any){
// Your code here
}
}
</script>loadError
Fires when data load fails.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| error | object | returns the AJAX error object |
Example
<ej-treeview id="treeView" [fields]='field' (loadError)="onLoadError($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onLoadError(e: any){
// Your code here
}
}
</script>loadSuccess
Fires when data loaded successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| data | object | returns the success data from the URL |
| targetParent | object | returns the target parent element, the data returned from the URL to be appended to the given parent element, else in TreeView |
| parentDetails | object | returns the given parent node details |
Example
<ej-treeview id="treeView" [fields]='field' (loadSuccess)="onLoadSuccess($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onLoadSuccess(e: any){
// Your code here
}
}
</script>nodeAdd
Fires once node added successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| data | object | returns the added data, that are given initially |
| nodes | object | returns the newly added elements |
| parentElement | object | returns the target parent element of the added element |
| parentDetails | object | returns the given parent node details |
Example
<ej-treeview id="treeView" [fields]='field' (nodeAdd)="onNodeAdd($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeAdd(e: any){
// Your code here
}
}
</script>nodeCheck
Fires once node checked successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| value | string | returns the value of the node |
| id | string | returns the id of the current element of the node clicked |
| parentId | string | returns the id of the parent element of current element of the node clicked |
| currentElement | object | returns the current element of the node clicked |
| isChecked | boolean | it returns true when the node checkbox is checked; otherwise, false. |
| currentNode | Array | it returns the currently checked node name |
| currentCheckedNodes | Array | it returns the currently checked and its child node details |
Example
<ej-treeview id="treeView" [fields]='field' (nodeCheck)="onNodeCheck($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeCheck(e: any){
// Your code here
}
}
</script>nodeClick
Fires when node clicked successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| currentElement | object | returns the current element of the node clicked |
| id | string | returns the id of currently clicked TreeView node |
| parentId | string | returns the parentId of currently clicked TreeView node |
Example
<ej-treeview id="treeView" [fields]='field' (nodeClick)="onNodeClick($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeClick(e: any){
// Your code here
}
}
</script>nodeCollapse
Fires when node collapsed successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| id | string | returns the id of the current element of the node clicked |
| type | string | returns the name of the event |
| parentId | string | returns the id of the parent element of current element of the node clicked |
| value | string | returns the value of the node |
| currentElement | object | returns the current element of the node clicked |
| isChildLoaded | boolean | returns the child nodes are loaded or not |
| async | boolean | returns the format asynchronous or synchronous |
Example
<ej-treeview id="treeView" [fields]='field' (nodeCollapse)="onNodeCollapse($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeCollapse(e: any){
// Your code here
}
}
</script>nodeCut
Fires when node cut successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| parentElement | object | returns the current parent element of the cut node |
| parentDetails | object | returns the given parent node details |
| keyCode | number | returns the key pressed key code value |
Example
<ej-treeview id="treeView" [fields]='field' (nodeCut)="onNodeCut($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeCut(e: any){
// Your code here
}
}
</script>nodeDelete
Fires when node deleted successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| parentElement | object | returns the current parent element of the deleted node |
| parentDetails | object | returns the given parent node details |
| removedNodes | array | returns the currently removed nodes |
Example
<ej-treeview id="treeView" [fields]='field' (nodeDelete)="onNodeDelete($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeDelete(e: any){
// Your code here
}
}
</script>nodeDrag
Fires when node dragging.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| dragTarget | object | returns the original drag target |
| target | object | returns the current target TreeView node |
| targetElementData | object | returns the current target details |
| draggedElement | object | returns the current parent element of the target node |
| draggedElementData | object | returns the given parent node details |
| event | object | returns the event object |
Example
<ej-treeview id="treeView" [fields]='field' (nodeDrag)="onNodeDrag($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeDrag(e: any){
// Your code here
}
}
</script>nodeDragStart
Fires once node drag start successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| dragTarget | object | returns the original drag target |
| parentElement | object | returns the current dragging parent TreeView node |
| parentElementData | object | returns the current dragging parent TreeView node details |
| target | object | returns the current parent element of the dragging node |
| targetElementData | object | returns the given parent node details |
| event | object | returns the event object |
Example
<ej-treeview id="treeView" [fields]='field' (nodeDragStart)="onNodeDragStart($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeDragStart(e: any){
// Your code here
}
}
</script>nodeDragStop
Fires before the dragged node to be dropped.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| dropTarget | object | returns the original drop target |
| draggedElement | object | returns the current dragged TreeView node |
| draggedElementData | object | returns the current dragged TreeView node details |
| target | object | returns the current parent element of the dragged node |
| targetElementData | object | returns the given parent node details |
| position | string | returns the drop position such as before, after or over |
| event | object | returns the event object |
Example
<ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' (nodeDragStop)="onNodeDragStop($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeDragStop(e: any){
// Your code here
}
}
</script>nodeDropped
Fires once node dropped successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| dropTarget | object | returns the original drop target |
| droppedElement | object | returns the current dropped TreeView node |
| droppedElementData | object | returns the current dropped TreeView node details |
| target | object | returns the current parent element of the dropped node |
| targetElementData | object | returns the given parent node details |
| position | string | returns the drop position such as before, after or over |
| event | object | returns the event object |
Example
<ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' (nodeDropped)="onNodeDropped($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeDropped(e: any){
// Your code here
}
}
</script>nodeEdit
Fires once node edited successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| id | string | returns the id of the element |
| oldText | string | returns the oldText of the element |
| newText | string | returns the newText of the element |
| event | object | returns the event object |
| target | object | returns the target element, the given node to be cut |
| nodeDetails | object | returns the given target node values |
Example
<ej-treeview id="treeView" [fields]='field' [allowEditing]='allowEditing' (nodeEdit)="onNodeEdit($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeEdit(e: any){
// Your code here
}
}
</script>nodeExpand
Fires once node expanded successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| value | string | returns the value of the node |
| isChildLoaded | boolean | if the child node is ready to expanded state; otherwise, false. |
| currentElement | object | returns the current element of the node clicked |
| id | string | returns the id of currently clicked node |
| parentId | string | returns the parent id of currently clicked node |
| async | boolean | returns the format asynchronous or synchronous |
Example
<ej-treeview id="treeView" [fields]='field' (nodeExpand)="onNodeExpand($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeExpand(e: any){
// Your code here
}
}
</script>nodePaste
Fires once node pasted successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| target | object | returns the pasted element |
| nodeDetails | object | returns the given target node values |
| keyCode | number | returns the key pressed key code value |
Example
<ej-treeview id="treeView" [fields]='field' (nodePaste)="onNodePaste($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodePaste(e: any){
// Your code here
}
}
</script>nodeSelect
Fires when node selected successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| id | object | returns the id of the current element of the node clicked |
| parentId | object | returns the id of the parent element of current element of the node clicked |
| selectedNodes | array | returns the current selected nodes index of TreeView |
| value | string | returns the value of the node |
| currentElement | object | returns the current element of the node clicked |
Example
<ej-treeview id="treeView" [fields]='field' (nodeSelect)="onNodeSelect($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeSelect(e: any){
// Your code here
}
}
</script>nodeUncheck
Fires once node unchecked successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
| event | object | returns the event object |
| id | object | returns the id of the current element of the node clicked |
| parentId | object | returns the id of the parent element of current element of the node clicked |
| value | string | returns the value of the node |
| currentElement | object | returns the current element of the node clicked |
| isChecked | boolean | it returns true when the node checkbox is checked; otherwise, false. |
| currentNode | string | it returns currently unchecked node name |
| currentUncheckedNodes | Array | it returns currently unchecked node and its child node details. |
Example
<ej-treeview id="treeView" [fields]='field' (nodeUncheck)="onNodeUncheck($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeUncheck(e: any){
// Your code here
}
}
</script>nodeUnselect
Fires once node unselected successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| currentElement | object | returns the current element of the node unselected |
| id | string | returns the id of the current element of the node unselected |
| model |
|
returns the TreeView model |
| parentId | string | returns the id of the parent element of current element of the node unselected |
| selectedNodes | array | returns the current selected nodes index of TreeView |
| type | string | returns the name of the event |
| value | string | returns the value of the node |
Example
<ej-treeview id="treeView" [fields]='field' [allowMultiSelection]='allowMultiSelection' (nodeUnselect)="onNodeUnselect($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onNodeUnselect(e: any){
// Your code here
}
}
</script>ready
Fires when TreeView nodes are loaded successfully
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. | element | object | returns the TreeView element. | </tr>
| model |
|
returns the TreeView model |
| type | string | returns the name of the event |
Example
<ej-treeview id="treeView" [fields]='field' (ready)="onReady($event)"></ej-treeview><script>
export class AppComponent {
constructor(){
}
onReady(e: any){
// Your code here
}
}
</script>