Ej1 api migration in Angular Treeview component

4 Apr 202324 minutes to read

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-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var object = [{ id: "temp", name: "New node" }, { id: "new", name: "New node 1" }];
tree.addNodes(object, "book");
Triggers before adding node Event: beforeAdd

<ej-treeview id='tree' (beforeAdd)="beforeAdd()" [fields]='field'></ej-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var object = [{ id: "1", name: "node" }],
var child = tree.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)
tree.addNodes(object, "book", index+1);
Adding node before a particular node Method: insertBefore

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var object = [{ id: "1", name: "node" }],
var child = tree.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)
tree.addNodes(object, "book", index-1);
Triggers when node is added successfully Event: nodeAdd

<ej-treeview id='tree' (nodeAdd)="nodeAdd()" [fields]='field'></ej-treeview>

Script
nodeAdd() {} 		Event: dataSourceChanged

<ejs-treeview id='tree' (dataSourceChanged)="dataSourceChanged()" [fields]='field'></ejs-treeview>

Script
public dataSourceChanged(): void {}

Common

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

<ej-treeview id='tree' allowKeyboardNavigation=false [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' (keyPress)="keyPress($event)"></ejs-treeview>

Script
public keyPress(args): void {
args.cancel = true;
}
Triggers before node is cut Event: beforeCut

<ej-treeview id='tree' (beforeCut)="beforeCut()" [fields]='field'></ej-treeview>

Script
beforeCut() {} 		Not Applicable
Triggers before node is deleted Event: beforeDelete

<ej-treeview id='tree' (beforeDelete)="beforeDelete()" [fields]='field'></ej-treeview>

Script
beforeDelete() {} 		Not Applicable
Triggers before loading nodes Event: beforeLoad

<ej-treeview id='tree' (beforeLoad)="beforeLoad()" [fields]='field'></ej-treeview>

Script
beforeLoad() {} 		Not Applicable
Triggers before node is pasted Event: beforePaste

<ej-treeview id='tree' (beforePaste)="beforePaste()" [fields]='field'></ej-treeview>

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

<ej-treeview id='tree' (create)="onCreate()" [fields]='field'></ej-treeview>

Script
onCreate() {} 		Event: created

<ejs-treeview id='tree' (created)="onCreated()"></ejs-treeview>

Script
public onCreated(): void {}
Css class Property: cssClass

<ej-treeview id='tree' cssClass='custom' [fields]='field'></ej-treeview> 		Property: cssClass

<ejs-treeview id='tree' cssClass='custom'></ejs-treeview>
Triggers when Treeview is destroyed Event: destroy

<ej-treeview id='tree' (destroy)="onDestroy()" [fields]='field'></ej-treeview>

Script
onDestroy() {} 		Event: destroyed

<ejs-treeview id='tree' (destroyed)="onDestroyed()"></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.destroy();
Disable Node Method: disableNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.disableNodes(["1", "2"]);
Enable Animation Property: enableAnimation

<ej-treeview id='tree' enableAnimation=false [fields]='field'></ej-treeview> 		Property: animation

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.animation.expand.duration=0
treeObj.animation.collapse.duration=0
Control state Property: enabled

<ej-treeview id='tree' enabled=false [fields]='field'></ej-treeview> 		Not Applicable
Enable Node Method: enableNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.enableNodes(["1", "2"]);
Persistence Property: enablePersistence

<ej-treeview id='tree' enablePersistence=true [fields]='field'></ej-treeview> 		Property: enablePersistence

<ejs-treeview id='tree' enablePersistence=true [fields]='field'></ejs-treeview>
Right to Left Property: enableRTL

<ej-treeview id='tree' enableRTL=true [fields]='field'></ej-treeview> 		Property: enableRtl

<ejs-treeview id='tree' enableRtl=true [fields]='field'></ejs-treeview>
Ensure visibility Method: ensureVisible

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.ensureVisible("1");
Mapping fields Property: fields

<ej-treeview id='tree' [fields]='field'></ej-treeview>

Script
public fields:any = {
id: "id",text: "text",parentId: "parent",dataSource: this.localData,isChecked: "checked",selected: "selected",spriteCssClass: "spriteImage",imageUrl: "imageUrl",htmlAttribute: "nodeProperty",linkAttribute: "linkProperty",imageAttribute: "imageProperty"
} 		Property: fields

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
public field: Object = { dataSource: this.localData, 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 };
Get child nodes Method: getChildren

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var parent=tree.element.querySelector('[data-uid="1"]')<br/>console.log(parent.querySelector('.e-list-item'))
Get node Method: getNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.getNode("1");
Get node by index Method: getNodeByIndex

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var nodes=tree.element.querySelectorAll('.e-list-item')
console.log(nodes[3]);
Get node count Method: getNodeCount

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var nodes=tree.element.querySelectorAll('.e-list-item')
console.log("Node count is " + nodes.length);
Get node index Method: getNodeIndex

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var nodes=tree.element.querySelectorAll('.e-list-item')
var node = tree.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-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var nodeText =tree.getNode("1")['text']
console.log(nodeText)
Get updated datasource Method: getTreeData

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.getTreeData();
Get visible nodes Method: getVisibleNodes

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ej-treeview id='tree' height="400px" [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' cssClass='custom'></ejs-treeview>
Css
.e-treeview.custom{
height: 400px;
}
Checking for child nodes Method: hasChildNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.element.querySelector('.e-list-parent').style.display="none"
Hide node Method: hideNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.element.querySelector('[data-uid="book"]').style.display="none"
HTML Attributes Property: htmlAttributes

<ej-treeview id='tree' [fields]='field'[htmlAttributes]= "htmlAttr"></ej-treeview>

script
constructor() {
this.htmlAttr = {name: "treeview"};
} 		Can be achieved using,

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.element.classList.add("htmlAttr")
To check if child nodes are loaded Method: isChildLoaded

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var parent=tree.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-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var node=tree.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-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
if (tree.getNode('book')['text']) !== "") {
console.log("Node exists")
}
To check if node is visible Method: isVisible

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
if (tree.element.querySelector('[data-uid="book"]').style.display !== "none"){
console.log("Node is visible")
}
Triggers on key press Event: keyPress

<ej-treeview id='tree' (keyPress)="onKeyPress()" [fields]='field'></ej-treeview>

Script
onKeyPress() {} 		Event: keyPress

<ejs-treeview id='tree' (keyPress)="onKeyPress()"></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
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;
tree.addNodes(childData, "book")
}));
Triggers when data load fails Event: loadError

<ej-treeview id='tree' (loadError)="loadError()" [fields]='field'></ej-treeview>

Script
loadError() {} 		Can be achieved using,

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
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

<ej-treeview id='tree' loadOnDemand=true [fields]='field'></ej-treeview> 		Property: loadOnDemand

<ejs-treeview id='tree' [fields]='field' loadOnDemand=false></ejs-treeview>
Treeview is rendered in load on demand by default
Triggers when data load is success Event: loadSuccess

<ej-treeview id='tree' (loadSuccess)="loadSuccess()" [fields]='field'></ej-treeview>

Script
loadSuccess() {}
@ViewChild("tree") tree: TreeViewComponent;
tree.loadData("childData", $("#book")); 		Can be achieved using,

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.moveNodes(["book"], "art");
Triggers when node is clicked successfully Event: nodeClick

<ej-treeview id='tree' (nodeClick)="nodeClick()" [fields]='field'></ej-treeview>

Script
nodeClick() {} 		Event: nodeClicked

<ejs-treeview id='tree' (nodeClicked)="nodeClicked()"></ejs-treeview>

Script
public nodeClicked(): void {}
Triggers when node is cut successfully Event: nodeCut

<ej-treeview id='tree' (nodeCut)="nodeCut()" [fields]='field'></ej-treeview>

Script
nodeCut() {} 		Not Applicable
Triggers when node is deleted successfully Event: nodeDelete

<ej-treeview id='tree' (nodeDelete)="nodeDelete()" [fields]='field'></ej-treeview>

Script
nodeDelete() {} 		Event: dataSourceChanged

<ejs-treeview id='tree' (dataSourceChanged)="dataSourceChanged()" [fields]='field'></ejs-treeview>

Script
public dataSourceChanged(): void {}
Triggers when node is pasted successfully Event: nodePaste

<ej-treeview id='tree' (nodePaste)="nodePaste()" [fields]='field'></ej-treeview>

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

<ej-treeview id='tree' (ready)="onReady()" [fields]='field'></ej-treeview>

Script
onReady() {} 		Event: dataBound

<ejs-treeview id='tree' (dataBound)="dataBound()"></ejs-treeview>

Script
public dataBound(): void {}
Refresh Treeview control Method: refresh

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.element.querySelector('.e-list-parent').style.display="block"
Show node Method: showNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.element.querySelector('[data-uid="book"]').style.display="block"
Remove all Treeview nodes Method: removeAll

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.removeNodes([tree.element.querySelector('.e-list-parent')])
Remove Treeview node Method: removeNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.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

<ejs-treeview id='tree' [fields]='field' sortOrder='Descending'></ejs-treeview>
Update node text Method: updateText

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.updateNode("book", "text");
Width of Treeview control Property: width

<ej-treeview id='tree' width="300px" [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' cssClass='custom'></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: autoCheck

<ej-treeview id='tree' showCheckbox=true autoCheck=false [fields]='field'></ej-treeview> 		Property: autoCheck

<ej-treeview id='tree' autoCheck=false showCheckBox=true [fields]='field'></ej-treeview>
Prevent indeterminate state in parent node Property: autoCheckParentNode

<ej-treeview id='tree' autoCheckParentNode=true showCheckbox=true [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' nodeChecked="nodeChecked" [fields]='field' autoCheck=false showCheckBox=true></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
public nodeChecked(args): void {
var child = tree.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') {
tree.autoCheck = true;
tree.checkAll(child.getAttribute('data-uid'));
} else if (child.querySelector('.e-list-item') !== null && args.isInteracted === true && args.action === 'uncheck') {
tree.autoCheck = true;
tree.uncheckAll(child.getAttribute('data-uid'));
}
tree.autoCheck = false;
if (args.action === 'check') {
tree.checkAll(checkNodes)
}
else if (args.action === 'uncheck' && child.parentNode.querySelector('.e-check') === null) {
tree.uncheckAll(checkNodes)
}
}
Check all nodes Method: checkAll

<ej-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>

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

<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.checkAll();
Check node Method: checkNode

<ej-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>

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

<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.checkAll("book");
Set checkednodes Property: checkedNodes

<ej-treeview id='tree' showCheckbox=true checkedNodes='checkedNodes' [fields]='field'></ej-treeview>

Script
public checkedNodes=[2, 8, 12] 		Property: checkedNodes

<ej-treeview id='tree' checkedNodes='checkedNodes' showCheckBox=true [fields]='field'></ej-treeview>

Script
public checkedNodes=["3", "9", "13"]
Get checked nodes Method: getCheckedNodes

<ej-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>

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

<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>

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

<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var nodes=tree.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-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>

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

<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
if (tree.getNode("book")['isChecked'] === true) {
console.log("Node is checked")
}
Triggers when node is checked successfully Event: nodeCheck

<ej-treeview id='tree' showCheckbox=true (nodeCheck)="nodeCheck()" [fields]='field'></ej-treeview>

Script
nodeCheck() {} 		Event: nodeChecked

<ejs-treeview id='tree' (nodeChecked)="nodeChecked()" showCheckBox=true></ejs-treeview>

Script
public nodeChecked(): void {
if (args.action == "check") {}
}
Checkbox support Property: showCheckbox

<ej-treeview id='tree' showCheckbox=true [fields]='field'></ej-treeview> 		Property: showCheckBox

<ejs-treeview id='tree' showCheckBox=true></ejs-treeview>
To uncheck all nodes Method: unCheckAll

<ej-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>

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

<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.uncheckAll();
To uncheck node Method: uncheckNode

<ej-treeview id='tree' [fields]='field' showCheckbox=true></ej-treeview>

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

<ejs-treeview id='tree' showCheckBox=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.uncheckAll(["book"]);
Triggers when node is unchecked successfully Event: nodeUncheck

<ej-treeview id='tree' showCheckbox=true (nodeUncheck)="nodeUncheck()" [fields]='field'></ej-treeview>

Script
nodeUncheck() {} 		Event: nodeChecked

<ejs-treeview id='tree' (nodeChecked)="nodeChecked()" showCheckBox=true></ejs-treeview>

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

<ejs-treeview id='tree' (nodeChecking)="nodeChecking()" showCheckBox=true></ejs-treeview>

Script
public nodeChecking(): void {
if (args.action == "check") {}
}

Drag and Drop

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

<ej-treeview id='tree' allowDragAndDrop=true [fields]='field'></ej-treeview> 		Property: allowDragAndDrop

<ejs-treeview id='tree' allowDragAndDrop=true></ejs-treeview>
Prevent Drag and drop to another Treeview Property: allowDragAndDropAcrossControl

<ej-treeview id='tree' allowDragAndDrop=true allowDragAndDropAcrossControl=true [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' (nodeDragStop)="nodeDragStop()" allowDragAndDrop=true></ejs-treeview>

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

<ej-treeview id='tree' allowDragAndDrop=true allowDropSibling=false [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' allowDragAndDrop=true (nodeDragStop)="nodeDragStop()" [fields]='field'></ejs-treeview>

Script

public nodeDragging(): void {
if(args.dropIndicator === "e-drop-next") {
args.cancel = true;
}}
Prevent child drop Property: allowDropChild

<ej-treeview id='tree' allowDragAndDrop=true allowDropChild=false [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' allowDragAndDrop=true (nodeDragStop)="nodeDragStop()" [fields]='field'></ejs-treeview>

Script

public nodeDragging(): void {
if(args.dropIndicator === "e-drop-in") {
args.cancel = true;
}}
Triggers when node is dragged Event: nodeDrag

<ej-treeview id='tree' allowDragAndDrop=true (nodeDrag)="nodeDrag()" [fields]='field'></ej-treeview>

Script
nodeDrag() {} 		Event: nodeDragging

<ejs-treeview id='tree' (nodeDragging)="nodeDragging()" allowDragAndDrop=true></ejs-treeview>

Script
public nodeDragging(): void {}
Triggers when node drag is started successfully Event: nodeDragStart

<ej-treeview id='tree' allowDragAndDrop=true (nodeDragStart)="nodeDragStart()" [fields]='field'></ej-treeview>

Script
nodeDragStart() {} 		Event: nodeDragStart

<ejs-treeview id='tree' (nodeDragStart)="nodeDragStart()" allowDragAndDrop=true></ejs-treeview>

Script
public nodeDragStart(): void {}
Triggers before dragged node drag is stopped Event: nodeDragStop

<ej-treeview id='tree' allowDragAndDrop=true (nodeDragStop)="nodeDragStop()" [fields]='field'></ej-treeview>

Script
nodeDragStop() {} 		Event: nodeDragStop

<ejs-treeview id='tree' (nodeDragStop)="nodeDragStop()" allowDragAndDrop=true></ejs-treeview>

Script
public nodeDragStop(): void {}
Triggers when node is dropped successfully Event: nodeDropped

<ej-treeview id='tree' allowDragAndDrop=true (nodeDropped)="nodeDropped()" [fields]='field'></ej-treeview>

Script
nodeDropped() {} 		Event: nodeDropped

<ejs-treeview id='tree' (nodeDropped)="nodeDropped()" allowDragAndDrop=true></ejs-treeview>

Script
public nodeDropped(): void {}

Expand/Collapse nodes

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

<ej-treeview id='tree' (beforeCollapse)="beforeCollapse()" [fields]='field'></ej-treeview>

Script
beforeCollapse() {} 		Event: nodeCollapsing

<ejs-treeview id='tree' (nodeCollapsing)="nodeCollapsing()"></ejs-treeview>

Script
public nodeCollapsing(): void {}
Triggers before node is expanded Event: beforeExpand

<ej-treeview id='tree' (beforeExpand)="beforeExpand()" [fields]='field'></ej-treeview>

Script
beforeExpand() {} 		Event: nodeExpanding

<ejs-treeview id='tree' (nodeExpanding)="nodeExpanding()"></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.collapseAll();
Collapse Node Method: collapseNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.collapseAll(["1"]);
Prevent multiple nodes expand Property: enableMultipleExpand

<ej-treeview id='tree' enableMultipleExpand=false [fields]='field'></ej-treeview> 		Can be achieved using,

<ejs-treeview id='tree' (nodeExpanding)="nodeExpanding()" [fields]='field'></ejs-treeview>

Script

public nodeExpanding(): void{
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-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.expandAll();
Expand Node Method: expandNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.expandAll(["1"]);
Gets/Sets Expanded nodes Property: expandedNodes

<ej-treeview id='tree' [fields]='field' [expandedNodes]='expandedNodes'></ej-treeview>

Script
public expandedNodes: string[] = ['1', '2']; 		Property: expandedNodes

<ejs-treeview id='tree' [expandedNodes]='expandedNodes' [fields]='field'></ejs-treeview>

Script
public expandedNodes: string[] = ['1', '2'];
Expand action Property: expandOn

<ej-treeview id='tree' [fields]='field' expandOn='click'></ej-treeview> 		Property: expandOn

<ejs-treeview id='tree' [fields]='field' expandOn='Click'></ejs-treeview>
Get expanded nodes Method: getExpandedNodes

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
if(tree.expandedNodes.indexOf("book") !== -1) {
console.log("Node is expanded")
}
Triggers when node is collapsed successfully Event: nodeCollapse

<ej-treeview id='tree' (nodeCollapse)="nodeCollapse()" [fields]='field'></ej-treeview>

Script
nodeCollapse() {} 		Event: nodeCollapsed

<ejs-treeview id='tree' (nodeCollapsed)="nodeCollapsed()"></ejs-treeview>

Script
public nodeCollapsed(): void {}
Triggers when node is expanded successfully Event: nodeExpand

<ej-treeview id='tree' (nodeExpand)="nodeExpand()" [fields]='field'></ej-treeview>

Script
nodeExpand() {} 		Event: nodeExpanded

<ejs-treeview id='tree' (nodeExpanded)="nodeExpanded()"></ejs-treeview>

Script
public nodeExpanded(): void {}

Node Editing

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

<ej-treeview id='tree' allowEditing=true [fields]='field'></ej-treeview> 		Property: allowEditing

<ej-treeview id='tree' allowEditing=true [fields]='field'></ej-treeview>
Triggers before node is edited Event: beforeEdit

<ej-treeview id='tree' (beforeEdit)="beforeEdit()" allowEditing=true [fields]='field'></ej-treeview>

Script
beforeEdit() {} 		Event: nodeEditing

<ejs-treeview id='tree' (nodeEditing)="nodeEditing()" allowEditing=true></ejs-treeview>

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

<ejs-treeview id='tree' allowEditing=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.beginEdit("1");
Triggers before node edit is successful Event: inlineEditValidation

<ej-treeview id='tree' (inlineEditValidation)="inlineEditValidation()" allowEditing=true [fields]='field'></ej-treeview>

Script
inlineEditValidation() {} 		Event: nodeEdited

<ejs-treeview id='tree' (nodeEdited)="nodeEdited()" allowEditing=true [fields]='field'></ejs-treeview>

Script
public nodeEdited(): void {}
Triggers when node is edited successfully Event: nodeEdit

<ej-treeview id='tree' (nodeEdit)="nodeEdit()" allowEditing=true [fields]='field'></ej-treeview>

Script
nodeEdit() {} 		Event: dataSourceChanged

Event: dataSourceChanged

<ejs-treeview id='tree' (dataSourceChanged)="dataSourceChanged()" [fields]='field'></ejs-treeview>

Script
public dataSourceChanged(): void {}

Node Selection

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

<ej-treeview id='tree' allowMultiSelection=true [fields]='field'></ej-treeview> 		Property: allowMultiSelection

<ejs-treeview id='tree' allowMultiSelection=true [fields]='field'></ejs-treeview>
Triggers before node is selected Event: beforeSelect

<ej-treeview id='tree' (beforeSelect)="beforeSelect()" [fields]='field'></ej-treeview>

Script
beforeSelect() {} 		Event: nodeSelecting

<ejs-treeview id='tree' (nodeSelecting)="nodeSelecting()" [fields]='field'></ejs-treeview>

Script
public nodeSelecting(): void {}
Fullrowselection Property: fullRowSelect

<ej-treeview id='tree' fullRowSelect=true [fields]='field'></ej-treeview> 		Property: fullRowSelect

<ejs-treeview id='tree' fullRowSelect=true [fields]='field'></ejs-treeview>
Get selected node Method: getSelectedNode

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var nodes=tree.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-treeview id='tree' [fields]='field' allowMultiSelection=true></ej-treeview>

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

<ejs-treeview id='tree' allowMultiSelection=true [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field' allowMultiSelection=true></ej-treeview>

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

<ejs-treeview id='tree' allowMultiSelection=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var nodes=tree.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-treeview id='tree' [fields]='field'></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
if (tree.selectedNodes.indexOf("book") !== -1) {
console.log("Node is selected")
}
Triggers when node is selected successfully Event: nodeSelect

<ej-treeview id='tree' (nodeSelect)="nodeSelect()" [fields]='field'></ej-treeview>

Script
nodeSelect() {} 		Event: nodeSelected

<ejs-treeview id='tree' (nodeSelected)="nodeSelected()" [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field' allowMultiSelection=true></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field' allowMultiSelection=true></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field' [selectedNode]='selectedNode'></ej-treeview>

Script
public selectedNode: string[] = ['1']; 		Property: selectedNodes

<ejs-treeview id='tree' [selectedNodes]='selectedNode' [fields]='field'></ejs-treeview>

Script
public selectedNode: string[] = ['1'];
Select node Method: selectNode

<ej-treeview id='tree' [fields]='field' allowMultiSelection=true></ej-treeview>

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

<ejs-treeview id='tree' [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.selectedNodes=["book"]
Gets/Sets selected nodes Property: selectedNodes

<ej-treeview id='tree' [fields]='field' allowMultiSelection=true [selectedNodes]='selectedNodes'></ej-treeview>

Script
public selectedNodes: string[] = ['1', '2']; 		Property: selectedNodes

<ejs-treeview id='tree' allowMultiSelection=true [selectedNodes]='selectedNodes' [fields]='field'></ejs-treeview>

Script
public selectedNodes: string[] = ['1', '2'];
Triggers when node is unselected successfully Event: nodeUnselect

<ej-treeview id='tree' (nodeUnselect)="nodeUnselect()" [fields]='field'></ej-treeview>

Script
nodeUnselect() {} 		Event: nodeSelected

<ejs-treeview id='tree' (nodeSelected)="nodeSelected()" [fields]='field'></ejs-treeview>

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

<ej-treeview id='tree' [fields]='field' allowMultiSelection=true></ej-treeview>

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

<ejs-treeview id='tree' allowMultiSelection=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
tree.selectedNodes=[];
To unselect node Method: unselectNode

<ej-treeview id='tree' [fields]='field' allowMultiSelection=true></ej-treeview>

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

<ejs-treeview id='tree' allowMultiSelection=true [fields]='field'></ejs-treeview>

Script
@ViewChild("tree") tree: TreeViewComponent;
var selectedNodes=tree.selectedNodes.pop(book)

Template

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

<ej-treeview id='tree' [fields]='field' [template]='templateData'></ej-treeview> 		Property: nodeTemplate

<ejs-treeview id='tree' [nodeTemplate]='templateData' [fields]='field'></ejs-treeview>