JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript TreeView control

08 May 2023 / 28 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

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

let treeObj: TreeView = new 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: “node”, hasChild: “hasChild”}
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.insertAfter(“node”, “book”);		 Can be achieved using

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
let object: Object = [{ id: “1”, name: “node” }];
let child: Element = treeObj.element.querySelector(’[data-uid=“book”]’);
let parent: Element = child.parentElement.closest(‘.e-list-item’);
let level: number = parseInt(parent.getAttribute(‘aria-level’))+1;
let childNodes: Element[] = Array.from(parent.querySelectorAll(‘.e-list-item.e-level-’+level))
let index: number = 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

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
});
treeObj.appendTo(“#tree”);
let object: Object = [{ id: “1”, name: “node” }];
let child: Element = treeObj.element.querySelector(’[data-uid=“book”]’);
let parent: Element = child.parentElement.closest(‘.e-list-item’);
let level: number = parseInt(parent.getAttribute(‘aria-level’))+1;
let childNodes: Element[] = Array.from(parent.querySelectorAll(‘.e-list-item.e-level-’+level))
let index: number = 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

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

let treeObj: TreeView = new 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,

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

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

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

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
let child: Element=treeObj.element.querySelector(’[data-uid=”’ + “book” + ‘”]’);
let parent: Element = 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,

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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

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

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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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() {}
});
treeObj.loadData(“childData”, $(“#book”));		 Can be achieved using,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
dataBound: function() {}
});
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,

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true,
autoCheck: false,
nodeChecked: function(args){
let child: Element = treeObj.element.querySelector(‘[data-uid=”’ + args.data[0]['id'] + ’”]’);
let checkNodes = [];
let element: Element = child.parentNode;
while ((element !== null
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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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”);
let check: string[]=treeObj.getAllCheckedNodes();
let i: number=0;
let checkedNodes: Element[];
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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
showCheckBox: true
});
treeObj.appendTo(“#tree”);
let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’)
let nodeIndex: number[];
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”},
showCheckbox: true
});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isNodeChecked($(“book”));		 Can be achieved using,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
nodeExpanding: function(args) {
let parent: Element=args.node.parentNode.closest(‘.e-list-item’);
if (parent === null) parent=args.node.parentNode.closest(‘.e-treeview’);
let children: Element[]=parent.querySelectorAll(‘.e-list-item’);
let i:number=0;
let nodes:string=[];
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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
let expand: string[]=treeObj.expandedNodes;
let i: number=0;
let expandedNodes: Element[];
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();
 Can be achieved using,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’)
let nodeIndex: number;
let i:number = 0;
while(i<nodes.length) {
if(nodes[i].classList.contains(‘e-icon-collapsible’)) {nodeIndex.push(i);
}
i++
}
console.log(nodeIndex)
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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
let select: string[]=treeObj.selectedNodes;
let selectedNode: Element[];
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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’)
let nodeIndex: number;
let i:number = 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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}
});
treeObj.appendTo(“#tree”);
let select: string[]=treeObj.selectedNodes;
let i: number=0;
let selectedNodes: Element[];
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,

let treeObj: TreeView = new TreeView({
fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”},
allowMultiSelection: true
});
treeObj.appendTo(“#tree”);
let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’)
let nodeIndex: number;
let i:number = 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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

let treeObj: TreeView = new 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,

let treeObj: TreeView = new 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,

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

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