ASP.NET Core
Demos
Support
Forum
Download
Search results

Migration From Essential JS 1 in ASP.NET Core TreeView control

This article describes the API migration process of TreeView component from Essential JS 1 to Essential JS 2.

Add nodes

Behavior API in Essential JS 1 API in Essential JS 2
Add node Method: addNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.addNode("node", "book");		 Method: addNodes

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
var object = [{ id: "temp", name: "New node" }, { id: "new", name: "New node 1" }];
treeObj.addNodes(object, "book");
Triggers before adding node Event: before-add

<ej-tree-view id="tree" before-add="beforeAdd"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeAdd(){}		 Not Applicable
Adding node after a particular node Method: insertAfter

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.insertAfter("node", "book");		 Can be achieved using

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>
var object = [{ id: "1", name: "node" }];
var child = treeObj.element.querySelector('[data-uid="book"]');
var parent = child.parentElement.closest('.e-list-item');
var level = parseInt(parent.getAttribute('aria-level'))+1;
var childNodes = Array.from(parent.querySelectorAll('.e-list-item.e-level-'+level))
var index = childNodes.indexOf(child)
treeObj.addNodes(object, "book", index+1);
Adding node before a particular node Method: insertBefore

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.insertAfter("node", "book");		 Can be achieved using

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>
var object = [{ id: "1", name: "node" }];
var child = treeObj.element.querySelector('[data-uid="book"]');
var parent = child.parentElement.closest('.e-list-item');
var level = parseInt(parent.getAttribute('aria-level'))+1;
var childNodes = Array.from(parent.querySelectorAll('.e-list-item.e-level-'+level))
var index = childNodes.indexOf(child)
treeObj.addNodes(object, "book", index-1);
Triggers when node is added successfully Event: node-add

<ej-tree-view id="tree" node-add="nodeAdd"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeAdd(){}		 Event: dataSourceChanged

<ejs-treeview id="tree" dataSourceChanged="dataSourceChanged">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function dataSourceChanged(){}

Common

Behavior API in Essential JS 1 API in Essential JS 2
Keyboard Navigation Property: allow-keyboard-navigation

<ej-tree-view id="tree" allow-keyboard-navigation=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Can be achieved using,

<ejs-treeview id="tree" keyPress="onKeyPress">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function onKeyPress(args){
args.cancel = true;
}
Triggers before node is cut Event: before-cut

<ej-tree-view id="tree" before-cut="beforeCut"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeCut(){}		 Not Applicable
Triggers before node is deleted Event: before-delete

<ej-tree-view id="tree" before-delete="beforeDelete"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeDelete(){}		 Not Applicable
Triggers before loading nodes Event: before-load

<ej-tree-view id="tree" before-load="beforeLoad"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeLoad(){}		 Not Applicable
Triggers before node is pasted Event: before-paste

<ej-tree-view id="tree" before-paste="beforePaste"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforePaste(){}		 Not Applicable
Triggers when Treeview is created Event: create

<ej-tree-view id="tree" create="onCreate"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function onCreate(){}		 Event: created

<ejs-treeview id="tree" created="onCreated">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function onCreated(){}
Css class Property: css-class

<ej-tree-view id="tree" css-class="custom"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: cssClass

<ejs-treeview id="tree" cssClass="custom">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Triggers when Treeview is destroyed Event: destroy

<ej-tree-view id="tree" destroy="onDestroy"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function onDestroy(){}		 Event: destroyed

<ejs-treeview id="tree" destroyed="onDestroyed">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function onDestroyed(){}
Destroy Treeview control Method: destroy

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.destroy();		 Method: destroy

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.destroy();
Disable Node Method: disableNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.disableNode("1");		 Method: disableNodes

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.disableNodes(["1", "2"]);
Enable Animation Property: enable-animation

<ej-tree-view id="tree" enable-animation=false><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: animation

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" animation="ViewBag.TreeViewNodeAnimation" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Controller

TreeViewNodeAnimationSettings Animation = new TreeViewNodeAnimationSettings();
List<Object> expand = new List<object>();
expand.Add(new{
duration = 0
});
Animation.Expand = expand[0];
List<Object> collapse = new List<object>();
collapse.Add(new{
duration = 0
});
Animation.Collapse = collapse[0];
ViewBag.TreeViewNodeAnimation = Animation;
Control state Property: enabled

<ej-tree-view id="tree" enabled=false><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Not Applicable
Enable Node Method: enableNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.enableNode("1");		 Method: enableNodes

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.enableNodes(["1", "2"]);
Persistence Property: enable-persistence

<ej-tree-view id="tree" enable-persistence=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: enablePersistence

<ejs-treeview id="tree" enablePersistence=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Right to Left Property: enable-rtl

<ej-tree-view id="tree" enable-rtl=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: enableRtl

<ejs-treeview id="tree" enableRTL=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Ensure visibility Method: ensureVisible

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.ensureVisible("1");		 Method: ensureVisible

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.ensureVisible("1");
Mapping fields Property: e-tree-view-fields

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name" is-checked="checked" selected="selected" sprite-css-class="custom" image-url="imageUrl" link-attribute="linkAttribute" html-attribute="htmlAttributes" image-attribute="img"></e-tree-view-fields></ej-tree-view>		 Property: e-treeview-fields

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded" htmlAttribute="htmlAttributes" imageAttribute="img" imageUrl="imageUrl" isChecked="checked" linkAttribute="linkAttribute" query=null selected="selected" spriteCssClass="custom" tableName=null>
</e-treeview-fields></ejs-treeview>
Get child nodes Method: getChildren

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getChildren("1");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var parent = instance.element.querySelector('[data-uid="1"]')
console.log(parent.querySelector('.e-list-item'))
Get node Method: getNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getNode("1");		 Method: getNode

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.getNode("1");
Get node by index Method: getNodeByIndex

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getNodeByIndex(3);		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.element.querySelectorAll('.e-list-item')
console.log(nodes[3]);
Get node count Method: getNodeCount

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getNodeCount();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes = instance.element.querySelectorAll('.e-list-item')
console.log("Node count is " + nodes.length);
Get node index Method: getNodeIndex

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getNodeIndex("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.element.querySelectorAll('.e-list-item')
var node = instance.element.querySelector('[data-uid="' + "book" + '"]');;
while(i<nodes.length) {
if(nodes[i] === node) {console.log("Node index is "+i)
break;
}
i++
}
Get parent of node Method: getParent

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getParent("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var child=instance.element.querySelector('[data-uid="' + "book" + '"]');
var parent = child.parentNode.closest('.e-list-item')
console.log(parent)
Get tree node text Method: getText

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getText("1");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodeText=instance.getNode("1")['text']
Get updated datasource Method: getTreeData

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getTreeData();		 Method: getTreeData

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.getTreeData();
Get visible nodes Method: getVisibleNodes

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getVisibleNodes();		 Not Applicable
Height of Treeview control Property: height

<ej-tree-view id="tree" height="400px"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Can be achieved using,

<ejs-treeview id="tree" cssClass="custom">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Css
.e-treeview.custom{
height: 400px;
}
Checking for child nodes Method: hasChildNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.hasChildNode("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var parent=instance.element.querySelector('[data-uid="book"]')
if (parent.querySelector('.e-list-item') !== null) {
console.log("Has child node")
}
Hide all nodes Method: hide

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.hide();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('.e-list-parent').style.display="none"
Hide node Method: hideNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.hideNode("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('[data-uid="book"]').style.display="none"
HTML Attributes Property: html-attributes

<ej-tree-view id="tree" html-attributes="htmlAttr"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

@{
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add("name", "treeView");
}		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var element= document.getElementById("tree");
element.classList.add("htmlAttr")
To check if child nodes are loaded Method: isChildLoaded

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.isChildLoaded("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var parent=instance.element.querySelector('[data-uid="book"]')
if (parent.querySelector('.e-list-item') !== null) {
console.log("Child is loaded")
}
To check if node is disabled Method: isDisabled

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.isDisabled("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var node=instance.element.querySelector('[data-uid="book"]')
if (node.classList.contains('e-disable') === true) {
console.log("Node is disabled")
}
To check if node exists in Treeview Method: isExist

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.isExist("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
if (instance.getNode('book')['text']) !== "") {
console.log("Node exists")
}
To check if node is visible Method: isVisible

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.isVisible("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
if (instance.element.querySelector('[data-uid="book"]').style.display !== "none"){
console.log("Node is visible")
}
Triggers on key press Event: key-press

<ej-tree-view id="tree" key-press="keyPress"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function keyPress(){}		 Event: keyPress

<ejs-treeview id="tree" keyPress="onKeyPress">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function onKeyPress(){}
Load Treeview nodes from particular URl Method: loadData

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.loadData("childData", "book");		 Can be achieved using,

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
var instance= document.getElementById("tree").ej2_instances[0];
TreeViewFieldsSettings data= new TreeViewFieldsSettings();
object dataManager = new DataManager {
Url = "/FileContent/rootNode",
Adaptor = "UrlAdaptor",
CrossDomain = true};
dataManager.executeQuery(new ej.data.Query().take(8).then((e) => { var childData = e.result;
instance.addNodes(childData, "book")
}));
Triggers when data load fails Event: load-error

<ej-tree-view id="tree" load-error="loadError"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function loadError(){}		 Can be achieved using,

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
var instance= document.getElementById("tree").ej2_instances[0];
TreeViewFieldsSettings data= new TreeViewFieldsSettings();
object dataManager = new DataManager {
Url = "/FileContent/rootNode",
Adaptor = "UrlAdaptor",
CrossDomain = true};
dataManager.executeQuery(new ej.data.Query().take(8).error((e) => {
console.log('Data loaded failed')
}));
Load on demand Property: load-on-demand

<ej-tree-view id="tree" load-on-demand=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: loadOnDemand

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" loadOnDemand=true id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>Treeview is rendered in load on demand by default
Triggers when data load is success Event: load-success

<ej-tree-view id="tree" load-success="loadSuccess"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function loadSuccess(){}
treeObj.loadData("childData", "book");		 Can be achieved using,

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
var instance= document.getElementById("tree").ej2_instances[0];
TreeViewFieldsSettings data= new TreeViewFieldsSettings();
object dataManager = new DataManager {
Url = "/FileContent/rootNode",
Adaptor = "UrlAdaptor",
CrossDomain = true};
dataManager.executeQuery(new ej.data.Query().take(8).then((e) => {
console.log('Data loaded successfully')
}));
To move node Method: moveNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.moveNode("book", "art");		 Method: moveNodes

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.moveNodes(["book"], "art");
Triggers when node is clicked successfully Event: node-click

<ej-tree-view id="tree" node-click="nodeClick"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeClick(){}		 Event: nodeClicked

<ejs-treeview id="tree" nodeClicked="onNodeClicked">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function onNodeClicked(){}
Triggers when node is cut successfully Event: node-cut

<ej-tree-view id="tree" node-cut="nodeCut"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeCut(){}		 Not Applicable
Triggers when node is deleted successfully Event: node-delete

<ej-tree-view id="tree" node-delete="nodeDelete"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeDelete(){}		 Event: dataSourceChanged

<ejs-treeview id="tree" dataSourceChanged="dataSourceChanged">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function dataSourceChanged(){}
Triggers when node is pasted successfully Event: node-paste

<ej-tree-view id="tree" node-paste="nodePaste"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodePaste(){}		 Not Applicable
Triggers when nodes are loaded successfully Event: ready

<ej-tree-view id="tree" ready="onReady"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function onReady(){}		 Event: dataBound

<ejs-treeview id="tree" dataBound="onDataBound">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function onDataBound(){}
Refresh Treeview control Method: refresh

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.refresh();		 Not Applicable
To show all nodes Method: show

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.show();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('.e-list-parent').style.display="block"
Show node Method: showNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.showNode("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('[data-uid="book"]').style.display="block"
Remove all Treeview nodes Method: removeAll

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.removeAll();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.removeNodes([instance.element.querySelector('.e-list-parent')])
Remove Treeview node Method: removeNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.removeNode("book");		 Method: removeNodes

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.removeNodes(["book"]);
Sort order Property: sort-settings

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
sortSettings: { allowSorting: true, sortOrder: ej.sortOrder.Descending }
});		 Property: sortOrder

<ejs-treeview id="tree" sortOrder="Descending">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Update node text Method: updateText

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.updateText("book", "text");		 Method: updateNode

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.updateNode("book", "text");
Width of Treeview control Property: width

<ej-tree-view id="tree" width="300px"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Can be achieved using,

<ejs-treeview id="tree" cssClass="custom">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Css
.e-treeview.custom{
width: 300px;
}

CheckBox

Behavior API in Essential JS 1 API in Essential JS 2
Prevent auto-check of child and parent Property: auto-check

<ej-tree-view id="tree" auto-check=false show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: autoCheck

<ejs-treeview id="tree" autoCheck=false showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Prevent indeterminate state in parent node Property: auto-check-parent-node

<ej-tree-view id="tree" auto-check-parent-node=false show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Can be achieved using,

<ejs-treeview id="tree" autoCheck=false showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
var treeObj= document.getElementById("tree").ej2_instances[0];
function nodeChecked(args){
var child = treeObj.element.querySelector('[data-uid="' + args.data[0]['id'] + '"]');
var checkNodes = [];
var element = child.parentNode;
while ((element !== null || element !== undefined) && !element.parentNode.classList.contains('e-treeview')) {
element = element.parentNode;
var id = element.getAttribute('data-uid');
if (id !== null) checkNodes.push(element.getAttribute('data-uid'))
}
if (child.querySelector('.e-list-item') !== null && args.isInteracted === true && args.action === 'check') {
treeObj.autoCheck = true;
treeObj.checkAll(child.getAttribute('data-uid'));
} else if (child.querySelector('.e-list-item') !== null && args.isInteracted === true && args.action === 'uncheck') {
treeObj.autoCheck = true;
treeObj.uncheckAll(child.getAttribute('data-uid'));
}
treeObj.autoCheck = false;
if (args.action === 'check') {
treeObj.checkAll(checkNodes)
}
else if (args.action === 'uncheck' && child.parentNode.querySelector('.e-check') === null) {
treeObj.uncheckAll(checkNodes)
}
}
Check all nodes Method: checkAll

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.checkAll();		 Method: checkAll

<ejs-treeview id="tree" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.checkAll();
Check node Method: checkNode

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.checkNode("book");		 Method: checkAll

<ejs-treeview id="tree" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.checkAll(["book"]);
Set checkednodes Property: checked-nodes

<ej-tree-view id="tree" checked-nodes="ViewBag.checkedNodes" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Controller
int checkedNodes[] = [2, 8, 12];
ViewBag.checkedNodes = checkedNodes;		 Property: checkedNodes

<ejs-treeview id="tree" checkedNodes="ViewBag.checkedNodes" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Controller
string checkedNodes[] = ["3", "9", "13"];
ViewBag.checkedNodes = checkedNodes;
Get checked nodes Method: getCheckedNodes

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getCheckedNodes();		 Can be achieved using,

<ej-tree-view id="tree" showCheckBox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var check=instance.getAllCheckedNodes();
var i=0;
var checkedNodes;
while(i<check.length) {
checkedNodes.push(instance.element.querySelector('[data-uid="' + checkedNodes[i] + '"]'));
i++
}
console.log(checkedNodes)
Get checked nodes index Method: getCheckedNodesIndex

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getCheckedNodesIndex();		 Can be achieved using,

<ej-tree-view id="tree" showCheckBox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes = instance.element.querySelectorAll('.e-list-item')
var nodeIndex[];
while(i<nodes.length) {
if(nodes[i].classList.contains('e-check')) {nodeIndex.push(i);
}
i++
}
console.log(nodeIndex)
To check if nodes are checked Method: isNodeChecked

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.isNodeChecked("book");		 Can be achieved using,

<ej-tree-view id="tree" showCheckBox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var checked=instance.getNode("book")['isChecked']
if (checked === true) {
console.log("Node is checked")
}
Triggers when node is checked successfully Event: node-check

<ej-tree-view id="tree" node-check="nodeCheck" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeCheck(){}		 Event: nodeChecked

<ejs-treeview id="tree" nodeChecked="nodeChecked" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeChecked(args){
if (args.action == "check") {}
}
Checkbox support Property: show-checkbox

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: showCheckBox

<ejs-treeview id="tree" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
To uncheck all nodes Method: unCheckAll

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.unCheckAll();		 Method: uncheckAll

<ejs-treeview id="tree" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.uncheckAll();
To uncheck node Method: uncheckNode

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.uncheckNode("book");		 Method: uncheckAll

<ejs-treeview id="tree" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.uncheckAll(["book"]);
Triggers when node is unchecked successfully Event: node-uncheck

<ej-tree-view id="tree" node-uncheck="nodeUncheck" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeUncheck(){}		 Event: nodeChecked

<ejs-treeview id="tree" nodeChecked="nodeChecked" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeChecked(args){
if (args.action == "un-check") {}
}
Triggers before nodes are checked/ unchecked Not Applicable Event: nodeChecking

<ejs-treeview id="tree" nodeChecking="nodeChecking" showCheckBox=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeChecking(args){
if (args.action == "un-check") {}
}

Drag and Drop

Behavior API in Essential JS 1 API in Essential JS 2
Drag and drop Property: allow-drag-and-drop

<ejs-treeview id="tree" allow-drag-and-drop=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>		 Property: allowDragAndDrop

<ejs-treeview id="tree" allowDragAndDrop=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Prevent Drag and drop to another Treeview Property: allow-drag-and-drop-across-control

<ejs-treeview id="tree" allow-drag-and-drop=true allow-drag-and-drop-across-control=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>		 Can be achieved using,

<ejs-treeview id="tree" nodeDragStop="nodeDragStop" allowDragAndDrop=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeDragStop(args){
if (args.draggedParentNode.closest('.e-treeview') !== args.dropTarget.closest('.e-treeview')) {
args.cancel = true;
}}
Prevent sibling drop Property: allow-drop-sibling

<ejs-treeview id="tree" allow-drag-and-drop=true allow-drop-sibling=false>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>		 Can be achieved using,

<ej-tree-view id="tree" node-drag-stop="nodeDragStop" allow-drag-and-drop=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeDragStop(args){
if(args.dropIndicator === "e-drop-next") {
args.cancel = true;
}
}
Prevent child drop Property: allow-drop-child

<ejs-treeview id="tree" allow-drag-and-drop=true allow-drop-child=false>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>		 Can be achieved using,

<ej-tree-view id="tree" node-drag-stop="nodeDragStop" allow-drag-and-drop=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeDragStop(args){
if(args.dropIndicator === "e-drop-in") {
args.cancel = true;
}
}
Triggers when node is dragged Event: node-drag

<ej-tree-view id="tree" node-drag="nodeDrag" allow-drag-and-drop=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeDrag(){}		 Event: nodeDragging

<ejs-treeview id="tree" allowDragAndDrop=true nodeDragging="nodeDragging">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeDragging(){}
Triggers when node drag is started successfully Event: node-drag-start

<ej-tree-view id="tree" node-drag-start="nodeDragStart" allow-drag-and-drop=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeDragStart(){}		 Event: nodeDragStart

<ejs-treeview id="tree" allowDragAndDrop=true nodeDragStart="nodeDragStart">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeDragStart(){}
Triggers before dragged node drag is stopped Event: node-drag-stop

<ej-tree-view id="tree" node-drag-stop="nodeDragStop" allow-drag-and-drop=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeDragStop(){}		 Event: nodeDragStop

<ejs-treeview id="tree" allowDragAndDrop=true nodeDragStop="nodeDragStop">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeDragStop(){}
Triggers when node is dropped successfully Event: node-dropped

<ej-tree-view id="tree" node-dropped="nodeDropped" allow-drag-and-drop=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeDropped(){}		 Event: nodeDropped

<ejs-treeview id="tree" allowDragAndDrop=true nodeDropped="nodeDropped">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeDropped(){}

Expand/Collapse nodes

Behavior API in Essential JS 1 API in Essential JS 2
Triggers before node is collapsed Event: before-collapse

<ej-tree-view id="tree" before-collapse="beforeCollapse">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeCollapse(){}		 Event: nodeCollapsing

<ejs-treeview id="tree" nodeCollapsing="nodeCollapsing">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeCollapsing(){}
Triggers before node is expanded Event: before-expand

<ej-tree-view id="tree" before-expand="beforeExpand">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeExpand(){}		 Event: nodeExpanding

<ejs-treeview id="tree" nodeExpanding="nodeExpanding">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeExpanding(){}
Collapse all nodes Method: collapseAll

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.collapseAll();		 Method: collapseAll

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.collapseAll();
Collapse Node Method: collapseNode

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.collapseNode("1");		 Method: collapseAll

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.collapseAll(["1"]);
Prevent multiple nodes expand Property: enable-multiple-expand

<ej-tree-view id="tree" enable-multiple-expand=false><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Can be achieved using,

<ej-tree-view id="tree" nodeExpanding="nodeExpanding"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeExpanding(){
var parent=args.node.parentNode.closest('.e-list-item');
if (parent === null) parent=args.node.parentNode.closest('.e-treeview');
var children=parent.querySelectorAll('.e-list-item');
var i=0;
var nodes=[];
while(i<children.length){<br/>nodes.push(children[i].getAttribute("data-uid"));
i++;}
this.collapseAll(nodes)
}
Expand all Nodes Method: expandAll

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.expandAll();		 Method: expandAll

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.expandAll();
Expand Node Method: expandNode

<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.expandNode("1");		 Method: expandAll

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.expandAll(["1"]);
Gets/Sets Expanded nodes Property: expanded-nodes

<ej-tree-view id="tree" expanded-nodes="ViewBag.expandedNodes"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Controller
int[] expandedNodes = {1, 2};
ViewBag.expandedNodes = expandedNodes;		 Property: expandedNodes

<ejs-treeview id="tree" expandedNodes="ViewBag.expandedNodes">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Controller
string[] expandedNodes = {"1", "2"};
ViewBag.expandedNodes = expandedNodes;
Expand action Property: expand-on

<ej-tree-view id="tree" expand-on="click"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: expandOn

<ejs-treeview id="tree" expandOn="Click">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Get expanded nodes Method: getExpandedNodes

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getExpandedNodes();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var expand=instance.expandedNodes;
var i=0;
var expandedNodes;
while(i<expand.length) {
expandedNodes.push(instance.element.querySelector('[data-uid="' + expandednodes[i] + '"]'));
i++
}
console.log(expandedNodes)
Get expanded nodes index Method: getExpandedNodesIndex

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getExpandedNodesIndex();		 Not Applicable
To check if node is expanded Method: isExpanded

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.isExpanded("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
if(instance.expandedNodes.indexOf("book") !== -1) {
console.log("Node is expanded")
}
Triggers when node is collapsed successfully Event: node-collapse

<ej-tree-view id="tree" node-collapse="nodeCollapsed">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeCollapsed(){}		 Event: nodeCollapsed

<ejs-treeview id="tree" nodeCollapsed="nodeCollapsed">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeCollapsed(){}
Triggers when node is expanded successfully Event: node-expand

<ej-tree-view id="tree" node-expand="nodeExpanded">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeExpanded(){}		 Event: nodeExpanded

<ejs-treeview id="tree" nodeExpanded="nodeExpanded">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeExpanded(){}

Node Editing

Behavior API in Essential JS 1 API in Essential JS 2
Editing Property: allow-editing

<ej-tree-view id="tree" allow-editing=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: allowEditing

<ejs-treeview id="tree" allowEditing=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Triggers before node is edited Event: before-edit

<ej-tree-view id="tree" before-edit="beforeEdit" allow-editing=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeEdit(){}		 Event: nodeEditing

<ejs-treeview id="tree" nodeEditing="nodeEditing" allowEditing=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeEditing(){}
To Enable editing programatically Not Applicable Method: beginEdit

<ejs-treeview id="tree">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.beginEdit("1");
Triggers before node edit is successful Event: inline-edit-validation

<ej-tree-view id="tree" inline-edit-validation="inlineEditValidation" allow-editing=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function inlineEditValidation(){}		 Event: nodeEdited

<ejs-treeview id="tree" nodeEdited="nodeEdited" allowEditing=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeEdited(){}
Triggers when node is edited successfully Event: node-edit

<ej-tree-view id="tree" node-edit="nodeEdit" allow-editing=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeEdit(){}		 Event: dataSourceChanged

<ejs-treeview id="tree" dataSourceChanged="dataSourceChanged">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function dataSourceChanged(){}

Node Selection

Behavior API in Essential JS 1 API in Essential JS 2
Multi-selection Property: allow-multi-selection

<ej-tree-view id="tree" allow-multi-selection=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: allowMultiSelection

<ejs-treeview id="tree" allowMultiSelection=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Triggers before node is selected Event: before-select

<ej-tree-view id="tree" before-select="beforeSelect">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function beforeSelect(){}		 Event: nodeSelecting

<ejs-treeview id="tree" nodeSelecting="nodeSelecting">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeSelecting(){}
Fullrowselection Property: full-row-select

<ej-tree-view id="tree" full-row-select=true>
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: fullRowSelect

<ejs-treeview id="tree" fullRowSelect=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Get selected node Method: getSelectedNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getSelectedNode();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var select=instance.selectedNodes;
var selectedNode;
selectedNode.push(instance.element.querySelector('[data-uid="' + selectedNode[i] + '"]'));
console.log(selectedNode)
Get selected node index Method: getSelectedNodeIndex

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getSelectedNodeIndex();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.element.querySelectorAll('.e-list-item')
var nodeIndex;
var i=0;
while(i<nodes.length) {
if(nodes[i].classList.contains('e-active')) {nodeIndex = i;
break;
}
i++
}
console.log(nodeIndex)
Get selected nodes Method: getSelectedNodes

<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getSelectedNodes();		 Can be achieved using,

<ejs-treeview id="tree" allowMultiSelection=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var select=instance.selectedNodes;
var i=0;
var selectedNodes;
while(i<select.length) {
selectedNodes.push(instance.element.querySelector('[data-uid="' + selectedNodes[i] + '"]'));
i++
}
console.log(selectedNodes)
Get selected nodes index Method: getSelectedNodesIndex

<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.getSelectedNodesIndex();		 Can be achieved using,

<ejs-treeview id="tree" allowMultiSelection=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.element.querySelectorAll('.e-list-item')
var nodeIndex;
var i = 0;
while(i<nodes.length) {
if(nodes[i].classList.contains('e-active')) {nodeIndex.push(i);
}
i++
}
console.log(nodeIndex)
To check if node is selected Method: isSelected

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.isSelected("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
if (instance.selectedNodes.indexOf("book") !== -1) {
console.log("Node is selected")
}
Triggers when node is selected successfully Event: node-select

<ej-tree-view id="tree" node-select="nodeSelect">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeSelect(){}		 Event: nodeSelected

<ejs-treeview id="tree" nodeSelected="nodeSelected">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeSelected(){
if (args.action =="select") {}
}
Select all nodes Method: selectAll

<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.selectAll();		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes = instance.element.querySelectorAll('.e-list-item')
var selectednodes;
for(int i = 0; i < nodes.length; i++) {
selectednodes.push(nodes[i].getAttribute('data-uid'))}
instance.selectedNodes = selectednodes;
Gets/Sets selected node Property: selected-node

<ej-tree-view id="tree" selected-node="ViewBag.selectedNode" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Controller
int selectedNode = 1;
ViewBag.selectedNode = selectedNode;		 Property: selectedNodes

<ejs-treeview id="tree" selectedNodes="ViewBag.selectedNodes">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Controller
string[] selectedNodes = {"1"};
ViewBag.selectedNodes = selectedNodes;
Select node Method: selectNode

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.selectNode("book");		 Can be achieved using,

<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.selectedNodes=["book"]
Gets/Sets selected nodes Property: selected-nodes

<ej-tree-view id="tree" selected-nodes="ViewBag.selectedNodes" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Controller
int[] selectedNodes = {1, 2};
ViewBag.selectedNodes = selectedNodes;		 Property: selectedNodes

<ejs-treeview id="tree" selectedNodes="ViewBag.selectedNodes" allowMultiSelection=true>
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Controller
string[] selectedNodes = {"1", "2"};
ViewBag.selectedNodes = selectedNodes;
Triggers when node is unselected successfully Event: node-unselect

$<ej-tree-view id="tree" node-unselect="nodeUnselect">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

function nodeUnselect(){}		 Event: nodeSelected

<ejs-treeview id="tree" nodeSelected="nodeSelected">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>

Script
function nodeSelected(){
if (args.action =="un-select") {}
}
To unselect all nodes Method: unselectAll

<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.unselectAll();		 Can be achieved using,

<ej-tree-view id="tree" allowMultiSelection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.selectedNodes=[];
To unselect node Method: unselectNode

<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script

var treeObj = $(“#tree").data(“ejTreeView”);
treeObj.unselectNode("book");		 Can be achieved using,

<ej-tree-view id="tree" allowMultiSelection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.selectedNodes.pop(book)

Template

Behavior API in Essential JS 1 API in Essential JS 2
Custom template Property: template

<ej-tree-view id="tree" template="templateData"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view>		 Property: nodeTemplate

<ejs-treeview id="tree" nodeTemplate="templateData">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded">
</e-treeview-fields></ejs-treeview>
Previous
Next