Ej1 api migration in EJ2 JavaScript TreeView control

28 Jan 202524 minutes to read

This article describes the API migration process of TreeView control 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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.addNode(“Node”, “#book”);		 Method: addNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
var object = [{ id: “temp”, name: “New node” }, { id: “new”, name: “New node 1” }];
treeObj.addNodes(object, “book”);
Triggers before adding node Event: beforeAdd

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforeAdd: function() {}
});		 Not Applicable
Adding node after a particular node Method: insertAfter

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.insertAfter(“node”, “book”);		 Can be achieved using

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.insertBefore(“node”, “book”);		 Can be achieved using

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
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: nodeAdd

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeAdd: function() {}
});		 Event: dataSourceChanged

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
dataSourceChanged: function() {}
});
treeObj.appendTo(“#tree”);

Common

Behavior API in Essential JS 1 API in Essential JS 2
Keyboard Navigation Property: allowKeyboardNavigation

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowKeyboardNavigation: false
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
keyPress: function(args) {
args.cancel = true;
}
});
treeObj.appendTo(“#tree”);
Triggers before node is cut Event: beforeCut

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforeCut: function() {}
});		 Not Applicable
Triggers before node is deleted Event: beforeDelete

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforeDelete: function() {}
});		 Not Applicable
Triggers before loading nodes Event: beforeLoad

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforeLoad: function() {}
});		 Not Applicable
Triggers before node is pasted Event: beforePaste

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforePaste: function() {}
});		 Not Applicable
Triggers when TreeView is created Event: create

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
create: function() {}
});		 Event: created

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
created: function() {}
});
treeObj.appendTo(“#tree”);
Css class Property: cssClass

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
cssClass: ‘custom’
});		 Property: cssClass

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
cssClass: ‘custom’
});
treeObj.appendTo(“#tree”);
Triggers when TreeView is destroyed Event: destroy

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
destroy: function() {}
});		 Event: destroyed

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
destroyed: function() {}
});
treeObj.appendTo(“#tree”);
Destroy TreeView control Method: destroy

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.destroy();		 Method: destroy

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.destroy();
Disable Node Method: disableNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.disableNode($(“#1”));		 Method: disableNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.disableNodes([“1”, “2”]);
Enable Animation Property: enableAnimation

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
enableAnimation: false
});		 Property: animation

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
animation: {expand: {duration: 0}, collapse: {duration: 0}}
});
treeObj.appendTo(“#tree”);
Control state Property: enabled

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
enabled: false
});		 Not Applicable
Enable Node Method: enableNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.enableNode($(“#1”));		 Method: enableNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.enableNodes([“1”, “2”]);
Persistence Property: enablePersistence

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

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
enablePersistence: true
});
treeObj.appendTo(“#tree”);
Right to Left Property: enableRTL

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
enableRTL: true
});		 Property: enableRtl

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
enableRtl: true
});
treeObj.appendTo(“#tree”);
Ensure visibility Method: ensureVisible

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.ensureVisible($(“#1”));		 Method: ensureVisible

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.ensureVisible(“1”);
Mapping fields Property: fields

$(“#tree”).ejTreeView({
fields: {dataSource: [], id: “id”, parentId: “pid”, text: “name”,child: “child”, hasChild: “hasChild”, expanded: “expanded”, htmlAttribute: “htmlAttributes”, imageAttribute: “img”, imageUrl: “imageUrl”, isChecked: “checked”, linkAttribute: “linkAttribute”, query: null, selected: “selected”, spriteCssClass: “custom”, tableName: null},
});		 Property: fields

var treeObj = new ej.navigations.TreeView({
fields: { dataSource: [], id: “id”, text: “name”, child: ‘child’, parentID: ‘pid’, hasChildren: ‘hasChild’, expanded: ‘expanded’, htmlAttributes: ‘htmlAttributes’, iconCss: ‘iconCss’, imageUrl: ‘imageUrl’, isChecked: ‘checked’, query: null, selected: ‘selected’, tableName: null, tooltip: ‘tooltip’, navigateUrl: ‘navigateUrl’},
});
treeObj.appendTo(“#tree”);
Get child nodes Method: getChildren

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getChildren(“1”);		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var parent=treeObj.element.querySelector(‘[data-uid=”1”]’)
console.log(parent.querySelector(‘.e-list-item’))
Get node Method: getNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNode($(“#1”));		 Method: getNode

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.getNode(“1”);
Get node by index Method: getNodeByIndex

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNodeByIndex(3);		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var nodes=treeObj.element.querySelectorAll(‘.e-list-item’)
console.log(nodes[3]);
Get node count Method: getNodeCount

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNodeCount();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var nodes=treeObj.element.querySelectorAll(‘.e-list-item’)
console.log(“Node count is “ + nodes.length);
Get node index Method: getNodeIndex

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNodeIndex($(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var nodes=treeObj.element.querySelectorAll(‘.e-list-item’)
var node = treeObj.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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getParent($(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var child=treeObj.element.querySelector(‘[data-uid=”’ + “book” + ‘”]’);
var parent = child.parentNode.closest(‘.e-list-item’)
console.log(parent)
Get tree node text Method: getText

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getText(“1”);		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var nodeText =treeObj.getNode("1")['text']
console.log(nodeText)
Get updated datasource Method: getTreeData

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getTreeData();		 Method: getTreeData

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.getTreeData();
Get visible nodes Method: getVisibleNodes

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getVisibleNodes();		 Not Applicable
Height of TreeView control Property: height

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
height: “400px”
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
cssClass: “custom”
});
treeObj.appendTo(“#tree”);
Css
.e-treeview.custom{
height: 400px;
}
Checking for child nodes Method: hasChildNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.hasChildNode($(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var parent=treeObj.element.querySelector(‘[data-uid=”book”]’)
if (parent.querySelector(‘.e-list-item’) !== null) {
console.log(“Has child node”)
}
Hide all nodes Method: hide

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.hide();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.element.querySelector(‘.e-list-parent’).style.display=”none”
Hide node Method: hideNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.hideNode($(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.element.querySelector(‘[data-uid=”book”]’).style.display=”none”
HTML Attributes Property: htmlAttributes

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
htmlAttributes: {class: “htmlAttr”}
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.element.classList.add(“htmlAttr”)
To check if child nodes are loaded Method: isChildLoaded

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isChildLoaded($(“book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var parent=treeObj.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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isDisabled($(“book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var node=treeObj.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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isExist($(“book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
if (treeObj.getNode('book')['text']) !== "") {
console.log("Node exists")
}
To check if node is visible Method: isVisible

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isVisible($(“book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
if (treeObj.element.querySelector(‘[data-uid=”book”]’).style.display !== “none”){
console.log(“Node is visible”)
}
Triggers on key press Event: keyPress

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
keyPress: function() {}
});		 Event: keyPress

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
keyPress: function() {}
});
treeObj.appendTo(“#tree”);
Load TreeView nodes from particular URl Method: loadData

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.loadData(“childData”, $(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var dataManager = new DataManager {
Url = “/FileContent/rootNode”,
Adaptor = “UrlAdaptor”,
CrossDomain = true};
dataManager.executeQuery(new ej.data.Query().take(8).then((e) => { var childData = e.result;
treeObj.addNodes(childData, “book”)
}));
Triggers when data load fails Event: loadError

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
loadError: function() {}
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var dataManager = new DataManager {
Url = “/FileContent/rootNode”,
Adaptor = “UrlAdaptor”,
CrossDomain = true};
dataManager.executeQuery(new ej.data.Query().take(8).error((e) => { console.log(‘Data load failed’)
}));
Load on demand Property: loadOnDemand

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

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
loadOnDemand: false
});
treeObj.appendTo(“#tree”);
TreeView is rendered in load on demand by default
Triggers when data load is success Event: loadSuccess

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
loadSuccess: function() {}
});
Script
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.loadData(“childData”, $(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var 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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.moveNode($(“#book”), “#art”);		 Method: moveNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
treeObj.moveNodes([“book”], “#art”);
Triggers when node is clicked successfully Event: nodeClick

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeClick: function() {}
});		 Event: nodeClicked

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeClicked: function() {}
});
treeObj.appendTo(“#tree”);
Triggers when node is cut successfully Event: nodeCut

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeCut: function() {}
});		 Not Applicable
Triggers when node is deleted successfully Event: nodeDelete

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeDelete: function() {}
});		 Event: dataSourceChanged

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
dataSourceChanged: function() {}
});
treeObj.appendTo(“#tree”);
Triggers when node is pasted successfully Event: nodePaste

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodePaste: function() {}
});		 Not Applicable
Triggers when nodes are loaded successfully Event: ready

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
ready: function() {}
});		 Event: dataBound

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
dataBound: function(args) {}
});
treeObj.appendTo(“#tree”);
Refresh TreeView control Method: refresh

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.refresh();		 Not Applicable
To show all nodes Method: show

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.show();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.element.querySelector(‘.e-list-parent’).style.display=”block”
Show node Method: showNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.showNode($(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.element.querySelector(‘[data-uid=”book”]’).style.display=”block”
Remove all TreeView nodes Method: removeAll

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.removeAll();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.removeNodes([treeObj.element.querySelector(‘.e-list-parent’)])
Remove TreeView node Method: removeNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.removeNode($(“#book”));		 Method: removeNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
treeObj.removeNodes([“book”]);
Sort order Property: sortSettings

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

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
sortOrder: “Descending”
});
treeObj.appendTo(“#tree”);
Update node text Method: updateText

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.updateText($(“#book”, “text”));		 Method: updateNode

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
treeObj.updateNode(“book”, “text”);
Width of TreeView control Property: width

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
width: “300px”
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
cssClass: “custom”
});
treeObj.appendTo(“#tree”);
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: autoCheck

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true,
autoCheck: false
});		 Property: autoCheck

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true,
autoCheck: false
});
treeObj.appendTo(“#tree”);		    
Prevent indeterminate state in parent node Property: autoCheckParentNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true,
autoCheckParentNode: true
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true,
autoCheck: false,
nodeChecked: function(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)
}
}
});
treeObj.appendTo(“#tree”);
Check all nodes Method: checkAll

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.checkAll();		 Method: checkAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);
treeObj.checkAll();		    
Check node Method: checkNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.checkNode($(“#book”));		 Method: checkAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);
treeObj.checkAll([“book”]);		    
Set checkednodes Property: checkedNodes

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true,
checkedNodes: [2, 8, 12]
});		 Property: checkedNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true,
checkedNodes: [“3”, “9”, “13”]
});
treeObj.appendTo(“#tree”);		    
Get checked nodes Method: getCheckedNodes

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getCheckedNodes();		 Can be achieved using,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var check=treeObj.getAllCheckedNodes();
var i=0;
var checkedNodes;
while(i<check.length) {
checkedNodes.push(treeObj.element.querySelector(‘[data-uid=”’ + checkedNodes[i] + ‘”]’));
i++
}
console.log(checkedNodes)		    
Get checked nodes index Method: getCheckedNodesIndex

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getCheckedNodesIndex();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);
var nodes=treeObj.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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isNodeChecked($(“book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);
if (treeObj.getNode("book")['isChecked'] === true) {
console.log("Node is checked")
} 		   
Triggers when node is checked successfully Event: nodeCheck

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},

showCheckBox: true,
nodeCheck: function() {}
});		 Event: nodeChecked

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},

showCheckBox: true,
nodeChecked: function(args) {
if (args.action == “check”) {}
}
});
treeObj.appendTo(“#tree”);		    
Checkbox support Property: showCheckbox

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true
});		 Property: showCheckBox

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);		    
To uncheck all nodes Method: unCheckAll

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.unCheckAll();		 Method: uncheckAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);
treeObj.uncheckAll();		    
To uncheck node Method: uncheckNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
showCheckbox: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.uncheckNode($(“#book”));		 Method: uncheckAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);
treeObj.uncheckAll([“book”]);		    
Triggers when node is unchecked successfully Event: nodeUncheck

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},

showCheckBox: true,
nodeUncheck: function() {}
});		 Event: nodeChecked

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},

showCheckBox: true,
nodeChecked: function(args) {
if (args.action == “un-check”) {}
}
});
treeObj.appendTo(“#tree”);		    
Triggers before nodes are checked/ unchecked Not Applicable Event: nodeChecking

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},

showCheckBox: true,
nodeChecking: function(args) {
if (args.action == “check”) {}
}
});
treeObj.appendTo(“#tree”);		    

Drag and Drop

Behavior API in Essential JS 1 API in Essential JS 2
Drag and drop Property: allowDragAndDrop

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

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowDragAndDrop: true
});
treeObj.appendTo(“#tree”);
Prevent Drag and drop to another TreeView Property: allowDragAndDropAcrossControl

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowDragAndDrop: true,
allowDragAndDropAcrossControl: false
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowDragAndDrop: true,
nodeDragStop: function(args) {
if (args.draggedParentNode.closest(‘.e-treeview’) !== args.dropTarget.closest(‘.e-treeview’)) {
args.cancel = true;
}}
});
treeObj.appendTo(“#tree”);
Prevent sibling drop Property: allowDropSibling

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowDragAndDrop: true,
allowDropSibling: false
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeDragStop: function(args) {
if(args.dropIndicator === “e-drop-next”) {
args.cancel = true;
}
});
treeObj.appendTo(“#tree”);
Prevent child drop Property: allowDropChild

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowDragAndDrop: true,
allowDropChild: false
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeDragStop: function(args) {
if(args.dropIndicator === “e-drop-in”) {
args.cancel = true;
}
});
treeObj.appendTo(“#tree”);
Triggers when node is dragged Event: nodeDrag

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowDragAndDrop: true,
nodeDrag: function() {}
});		 Event: nodeDragging

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowDragAndDrop: true,
nodeDragging: function() {}
});
treeObj.appendTo(“#tree”);
Triggers when node drag is started successfully Event: nodeDragStart

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowDragAndDrop: true,
nodeDragStart: function() {}
});		 Event: nodeDragStart

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowDragAndDrop: true,
nodeDragStart: function() {}
});
treeObj.appendTo(“#tree”);
Triggers before dragged node drag is stopped Event: nodeDragStop

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowDragAndDrop: true,
nodeDragStop: function() {}
});		 Event: nodeDragStop

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowDragAndDrop: true,
nodeDragStop: function() {}
});
treeObj.appendTo(“#tree”);
Triggers when node is dropped successfully Event: nodeDropped

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowDragAndDrop: true,
nodeDropped: function() {}
});		 Event: nodeDropped

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowDragAndDrop: true,
nodeDropped: function() {}
});
treeObj.appendTo(“#tree”);

Expand/Collapse nodes

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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforeCollapse: function() {}
});		 Event: nodeCollapsing

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeCollapsing: function() {}
});
treeObj.appendTo(“#tree”);
Triggers before node is expanded Event: beforeExpand

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforeExpand: function() {}
});		 Event: nodeExpanding

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeExpanding: function() {}
});
treeObj.appendTo(“#tree”);
Collapse all nodes Method: collapseAll

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.collapseAll();		 Method: collapseAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.collapseAll();
Collapse Node Method: collapseNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.collapseNode($(“#1”));		 Method: collapseAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.collapseAll([“1”]);
Prevent multiple nodes expand Property: enableMultipleExpand

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
enableMultipleExpand: false
});		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeExpanding: function(args) {
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){
nodes.push(children[i].getAttribute(“data-uid”));
i++;}
this.collapseAll(nodes)
}
});
treeObj.appendTo(“#tree”);
Expand all Nodes Method: expandAll

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.expandAll();		 Method: expandAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.expandAll();
Expand Node Method: expandNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.expandNode($(“1”));		 Method: expandAll

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.expandAll([“1”]);
Gets/Sets Expanded nodes Property: expandedNodes

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
expandedNodes: [1, 2]
});		 Property: expandedNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
expandedNodes: [“1”, “2”]
});
treeObj.appendTo(“#tree”);
Expand action Property: expandOn

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
expandOn: “click”
});		 Property: expandOn

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
expandOn: “Click”
});
treeObj.appendTo(“#tree”);
Get expanded nodes Method: getExpandedNodes

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getExpandedNodes();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var expand=treeObj.expandedNodes;
var i=0;
var expandedNodes;
while(i<expand.length) {
expandedNodes.push(treeObj.element.querySelector(‘[data-uid=”’ + expandednodes[i] + ‘”]’));
i++
}
console.log(expandedNodes)
Get expanded nodes index Method: getExpandedNodesIndex

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getExpandedNodesIndex();		 Not Applicable
To check if node is expanded Method: isExpanded

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isExpanded($(“book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
if(treeObj.expandedNodes.indexOf(“book”) !== -1) {
console.log(“Node is expanded”)
}
Triggers when node is collapsed successfully Event: nodeCollapse

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeCollapse: function() {}
});		 Event: nodeCollapsed

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeCollapsed: function() {}
});
treeObj.appendTo(“#tree”);
Triggers when node is expanded successfully Event: nodeExpand

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeExpand: function() {}
});		 Event: nodeExpanded

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeExpanded: function() {}
});
treeObj.appendTo(“#tree”);

Node Editing

Behavior API in Essential JS 1 API in Essential JS 2
Editing Property: allowEditing

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

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowEditing: true
});
treeObj.appendTo(“#tree”);
Triggers before node is edited Event: beforeEdit

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowEditing: true,
beforeEdit: function() {}
});		 Event: nodeEditing

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowEditing: true,
nodeEditing: function() {}
});
treeObj.appendTo(“#tree”);
To Enable editing programatically Not Applicable Method: beginEdit

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
treeObj.beginEdit(“1”);
Triggers before node edit is successful Event: inlineEditValidation

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowEditing: true,
inlineEditValidation: function() {}
});		 Event: nodeEdited

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowEditing: true,
nodeEdited: function() {}
});
treeObj.appendTo(“#tree”);
Triggers when node is edited successfully Event: nodeEdit

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowEditing: true,
nodeEdit: function() {}
});		 Event: dataSourceChanged

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
dataSourceChanged: function() {}
});
treeObj.appendTo(“#tree”);

Node Selection

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

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

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
Triggers before node is selected Event: beforeSelect

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
beforeSelect: function() {}
});		 Event: nodeSelecting

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeSelecting: function() {}
});
treeObj.appendTo(“#tree”);
Fullrowselection Property: fullRowSelect

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

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
fullRowSelect: true
});
treeObj.appendTo(“#tree”);
Get selected node Method: getSelectedNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNode();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var select=treeObj.selectedNodes;
var selectedNode;
selectedNode.push(treeObj.element.querySelector(‘[data-uid=”’ + selectedNode[i] + ‘”]’));
console.log(selectedNode)
Get selected node index Method: getSelectedNodeIndex

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNodeIndex();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var nodes=treeObj.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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowMultiSelection: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNodes();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
var select=treeObj.selectedNodes;
var i=0;
var selectedNodes;
while(i<select.length) {
selectedNodes.push(treeObj.element.querySelector(‘[data-uid=”’ + selectedNodes[i] + ‘”]’));
i++
}
console.log(selectedNodes)
Get selected nodes index Method: getSelectedNodesIndex

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowMultiSelection: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNodesIndex();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
var nodes=treeObj.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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isSelected($(“book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
if (treeObj.selectedNodes.indexOf(“book”) !== -1) {
console.log(“Node is selected”)
}
Triggers when node is selected successfully Event: nodeSelect

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeSelect: function() {}
});		 Event: nodeSelected

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeSelected: function(args) {
if (args.action ==”select”) {}
}
});
treeObj.appendTo(“#tree”);
Select all nodes Method: selectAll

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowMultiSelection: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.selectAll();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
var nodes = treeObj.element.querySelectorAll(‘.e-list-item’)
var selectednodes;
for(int i = 0; i < nodes.length; i++) {
selectednodes.push(nodes[i].getAttribute(‘data-uid’))}
treeObj.selectedNodes = selectednodes;
Gets/Sets selected node Property: selectedNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
selectedNode: 1
});		 Property: selectedNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
selectedNodes: [“1”]
});
treeObj.appendTo(“#tree”);
Select node Method: selectNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.selectNode($[“#book”]);		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
treeObj.selectedNodes=[“book”]
Gets/Sets selected nodes Property: selectedNodes

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
selectedNodes: [1, 2],
allowMultiSelection: true
});		 Property: selectedNodes

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
selectedNodes: [“1”, “2”],
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
Triggers when node is unselected successfully Event: nodeUnselect

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
nodeUnselect: function() {}
});		 Event: nodeSelected

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeSelected: function(args) {
if (args.action ==”un-select”) {}
}
});
treeObj.appendTo(“#tree”);
To unselect all nodes Method: unselectAll

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowMultiSelection: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.unselectAll();		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
treeObj.selectedNodes=[];
To unselect node Method: unselectNode

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
allowMultiSelection: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.unselectNode($(“#book”));		 Can be achieved using,

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
var selectedNodes=treeObj.selectedNodes.pop(book);

Template

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

$(“#tree”).ejTreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”},
template: “#templateData”,
});		 Property: nodeTemplate

var treeObj = new ej.navigations.TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeTemplate: “#templateData “,
});
treeObj.appendTo(“#tree”);