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

Migration from Essential JS 1 in React TreeView component

20 Apr 2021 / 19 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.addNode("Node", "#book");		 Method: addNodes

<TreeViewComponent fields={this.field} />

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeAdd: this.beforeAdd});
beforeAdd: function(){}		 Not Applicable
Adding node after a particular node Method: insertAfter

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.insertAfter("node", "book");		 Can be achieved using

<TreeViewComponent fields={this.field} />

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.insertBefore("node", "book");		 Can be achieved using

<TreeViewComponent fields={this.field} />

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeAdd: this.nodeAdd});
nodeAdd: function(){}		 Event: dataSourceChanged

<TreeViewComponent fields={this.field} dataSourceChanged={this.dataSourceChanged.bind(this)}/>

dataSourceChanged(): void {}

Common

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowKeyboardNavigation: false});		 Can be achieved using,

<TreeViewComponent fields={this.field} keyPress={this.keyPress.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeCut: this.beforeCut});
beforeCut: function(){}		 Not Applicable
Triggers before node is deleted Event: beforeDelete

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeDelete: this.beforeDelete});
beforeDelete: function(){}		 Not Applicable
Triggers before loading nodes Event: beforeLoad

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeLoad: this.beforeLoad});
beforeLoad: function(){}		 Not Applicable
Triggers before node is pasted Event: beforePaste

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforePaste: this.beforePaste});
beforePaste: function(){}		 Not Applicable
Triggers when Treeview is created Event: create

React.createElement(EJ.TreeView, {id: "tree", fields: fields, create: this.onCreate});
onCreate: function(){}		 Event: created

<TreeViewComponent fields={this.field} created={this.onCreated.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, cssClass: "custom"});		 Property: cssClass

<TreeViewComponent fields={this.field} cssClass={'custom'}/>
Triggers when Treeview is destroyed Event: destroy

React.createElement(EJ.TreeView, {id: "tree", fields: fields, destroy: this.onDestroy});
onDestroy: function(){}		 Event: destroyed

<TreeViewComponent fields={this.field} destroyed={this.onDestroyed.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.destroy();		 Method: destroy

<TreeViewComponent fields={this.field}/>

public tree: TreeViewComponent;
tree.destroy();
Disable Node Method: disableNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.disableNode("1");		 Method: disableNodes

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enableAnimation: false});		 Property: animation

<TreeViewComponent fields={this.field}/>

public tree: TreeViewComponent;
tree.animation.expand.duration=0
tree.animation.collapse.duration=0
Control state Property: enabled

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enabled: false});		 Not Applicable
Enable Node Method: enableNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.enableNode("1");		 Method: enableNodes

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enablePersistence: true});		 Property: enablePersistence

<TreeViewComponent enablePersistence={true} fields={this.field}/>
Right to Left Property: enableRTL

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enableRTL: true});		 Property: enableRtl

<TreeViewComponent enableRtl={true} fields={this.field}/>
Ensure visibility Method: ensureVisible

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.ensureVisible("1");		 Method: ensureVisible

<TreeViewComponent fields={this.field}/>

public tree: TreeViewComponent;
tree.ensureVisible("1");
Mapping fields Property: fields

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var fields = {
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

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getChildren("1");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNode("1");		 Method: getNode

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNodeByIndex(3);		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNodeCount();		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getNodeIndex("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getParent("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getText("1");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getTreeData();		 Method: getTreeData

<TreeViewComponent fields={this.field}/>

public tree: TreeViewComponent;
tree.getTreeData();
Get visible nodes Method: getVisibleNodes

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getVisibleNodes();		 Not Applicable
Height of Treeview control Property: height

React.createElement(EJ.TreeView, {id: "tree", fields: fields, height: "400px"});		 Can be achieved using,

<TreeViewComponent fields={this.field} cssClass={'custom'}/>

Css
.e-treeview.custom{
height: 400px;
}
Checking for child nodes Method: hasChildNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.hasChildNode("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.hide();		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.hideNode("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, htmlAttributes: htmlAttr});
var htmlAttr = {name: "treeview"};
}		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isChildLoaded("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isDisabled("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isExist("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isVisible("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, keyPress: this.onKeyPress});
onKeyPress: function(){}		 Event: keyPress

<TreeViewComponent fields={this.field} keyPress={this.onKeyPress.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.loadData("childData", "book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, loadError: this.loadError});
loadError: function(){}		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, loadOnDemand: true});		 Property: loadOnDemand

<TreeViewComponent fields={this.field} loadOnDemand={false}>Treeview is rendered in load on demand by default
Triggers when data load is success Event: loadSuccess

React.createElement(EJ.TreeView, {id: "tree", fields: fields, loadSuccess: this.loadSuccess});
loadSuccess: function(){}
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.loadData("childData", "book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.moveNode("book", "art");		 Method: moveNodes

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeClick: this.nodeClick});
nodeClick: function(){}		 Event: nodeClicked

<TreeViewComponent fields={this.field} nodeClicked={this.onNodeClicked.bind(this)}/>

onNodeClicked(): void {}
Triggers when node is cut successfully Event: nodeCut

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeCut: this.nodeCut});
nodeCut: function(){}		 Not Applicable
Triggers when node is deleted successfully Event: nodeDelete

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeDelete: this.nodeDelete});
nodeDelete: function(){}		 Event: dataSourceChanged

<TreeViewComponent fields={this.field} dataSourceChanged={this.dataSourceChanged.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodePaste: this.nodePaste});
nodePaste: function(){}		 Not Applicable
Triggers when nodes are loaded successfully Event: ready

React.createElement(EJ.TreeView, {id: "tree", fields: fields, ready: this.onReady});
onReady: function(){}		 Event: dataBound

<TreeViewComponent fields={this.field} dataBound={this.dataBound.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.refresh();		 Not Applicable
To show all nodes Method: show

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.show();		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.showNode("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.removeAll();		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public tree: TreeViewComponent;
tree.removeNodes([treeObj.element.querySelector('.e-list-parent')])
Remove Treeview node Method: removeNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.removeNode("book");		 Method: removeNodes

<TreeViewComponent fields={this.field}/>

public tree: TreeViewComponent;
tree.removeNodes("book");
Sort order Property: sortSettings

React.createElement(EJ.TreeView, {id: "tree", fields: fields, sortSettings: sortSettings});
var sortSettings = { allowSorting: true, sortOrder: "Descending" }		 Property: sortOrder

<TreeViewComponent sortOrder={'Descending'} fields={this.field}/>
Update node text Method: updateText

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.updateText("book", "text");		 Method: updateNode

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, width: "300px"});		 Can be achieved using,

<TreeViewComponent cssClass={'custom'} fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, autoCheck: false});		 Property: autoCheck

<TreeViewComponent fields={this.field} autoCheck={false} showCheckBox={true}/>
Prevent indeterminate state in parent node Property: autoCheckParentNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, autoCheckParentNode: false});		 Can be achieved using,

<TreeViewComponent fields={this.field} autoCheck={false} nodeChecked={this.nodeChecked.bind(this) showCheckBox={true}/>

public tree: TreeViewComponent;
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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.checkAll();		 Method: checkAll

<TreeViewComponent fields={this.field} showCheckBox={true}/>

public tree: TreeViewComponent;
tree.checkAll();
Check node Method: checkNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.checkNode("book");		 Method: checkAll

<TreeViewComponent fields={this.field} showCheckBox={true}/>

public tree: TreeViewComponent;
tree.checkAll("book");
Set checkednodes Property: checkedNodes

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, checkedNodes: ['2', '8', '12']});		 Property: checkedNodes

<TreeViewComponent fields={this.field} checkedNodes={'3', '9', '13'} showCheckBox={true}/>
Get checked nodes Method: getCheckedNodes

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getCheckedNodes();		 Can be achieved using,

<TreeViewComponent fields={this.field} showCheckBox={true}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getCheckedNodesIndex();		 Can be achieved using,

<TreeViewComponent fields={this.field} showCheckBox={true}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isNodeChecked("book");		 Can be achieved using,

<TreeViewComponent fields={this.field} showCheckBox={true}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, nodeCheck: this.nodeCheck});
nodeCheck: function(){}		 Event: nodeChecked

<TreeViewComponent fields={this.field} showCheckBox={true} nodeChecked={this.nodeChecked.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});		 Property: showCheckBox

<TreeViewComponent fields={this.field} showCheckBox={true}/>
To uncheck all nodes Method: unCheckAll

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.unCheckAll();		 Method: uncheckAll

<TreeViewComponent fields={this.field} showCheckBox={true}/>

public tree: TreeViewComponent;
tree.uncheckAll();
To uncheck node Method: uncheckNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.uncheckNode("book");		 Method: uncheckAll

<TreeViewComponent fields={this.field} showCheckBox={true}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, nodeUncheck: this.nodeUncheck});
nodeUncheck: function(){}		 Event: nodeChecked

<TreeViewComponent fields={this.field} showCheckBox={true} nodeChecked={this.nodeChecked.bind(this)}/>

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

<TreeViewComponent fields={this.field} showCheckBox={true} nodeChecking={this.nodeChecking.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true});		 Property: allowDragAndDrop

<TreeViewComponent fields={this.field} allowDragAndDrop={true} />
Prevent Drag and drop to another Treeview Property: allowDragAndDropAcrossControl

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, allowDragAndDropAcrossControl:true});		 Can be achieved using,

<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, allowDropSibling:false});		 Can be achieved using,

<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, allowDropChild:false});		 Can be achieved using,

<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDrag: this.nodeDrag});
nodeDrag: function(){}		 Event: nodeDragging

<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragging={this.nodeDragging.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDragStart: this.nodeDragStart});
nodeDragStart: function(){}		 Event: nodeDragStart

<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStart={this.nodeDragStart.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDragStop: this.nodeDragStop});
nodeDragStop: function(){}		 Event: nodeDragStop

<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDropped: this.nodeDropped});
nodeDropped: function(){}		 Event: nodeDropped

<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDropped={this.nodeDropped.bind(this)}/>

nodeDropped(): void {}

Expand/Collapse nodes

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeCollapse: this.beforeCollapse});
beforeCollapse: function(){}		 Event: nodeCollapsing

<TreeViewComponent fields={this.field} nodeCollapsing={this.nodeCollapsing.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeExpand: this.beforeExpand});
beforeExpand: function(){}		 Event: nodeExpanding

<TreeViewComponent fields={this.field} nodeExpanding={this.nodeExpanding.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.collapseAll();		 Method: collapseAll

<TreeViewComponent fields={this.field} />

public tree: TreeViewComponent;
tree.collapseAll();
Collapse Node Method: collapseNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.collapseNode("1");		 Method: collapseAll

<TreeViewComponent fields={this.field} />

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true});		 Can be achieved using,

<TreeViewComponent fields={this.field} nodeExpanding={this.nodeExpanding.bind(this)}/>

nodeExpanding(args): 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.expandAll();		 Method: expandAll

<TreeViewComponent fields={this.field} />

public tree: TreeViewComponent;
tree.expandAll();
Expand Node Method: expandNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.expandNode("1");		 Method: expandAll

<TreeViewComponent fields={this.field} />

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, expandedNodes: ['1', '2']});		 Property: expandedNodes

<TreeViewComponent fields={this.field} expandedNodes={this.expandedNodes}/>
public expandedNodes: string[] = ['1', '2'];
Expand action Property: expandOn

React.createElement(EJ.TreeView, {id: "tree", fields: fields, expandOn: 'Click'});		 Property: expandOn

<TreeViewComponent fields={this.field} expandOn={'Click'}/>
Get expanded nodes Method: getExpandedNodes

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getExpandedNodes();		 Can be achieved using,

<TreeViewComponent fields={this.field} />

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getExpandedNodesIndex();		 Not Applicable
To check if node is expanded Method: isExpanded

React.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isExpanded("book");		 Can be achieved using,

<TreeViewComponent fields={this.field} />

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeCollapse: this.nodeCollapse});
nodeCollapse: function(){}		 Event: nodeCollapsed

<TreeViewComponent fields={this.field} nodeCollapsed={this.nodeCollapsed.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeExpand: this.nodeExpand});
nodeExpand: function(){}		 Event: nodeExpanded

<TreeViewComponent fields={this.field} nodeExpanded={this.nodeExpanded.bind(this)}/>

nodeExpanded(): void {}

Node Editing

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowEditing: true});		 Property: allowEditing

<TreeViewComponent fields={this.field} allowEditing={true}/>
Triggers before node is edited Event: beforeEdit

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeEdit: this.beforeEdit, allowEditing: true});
beforeEdit: function(){}		 Event: nodeEditing

<TreeViewComponent fields={this.field} allowEditing={true} nodeEditing={this.nodeEditing.bind(this)}/>

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

<TreeViewComponent fields={this.field} allowEditing={true}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, inlineEditValidation: this.inlineEditValidation, allowEditing: true});
inlineEditValidation: function(){}		 Event: nodeEdited

<TreeViewComponent fields={this.field} allowEditing={true} nodeEdited={this.nodeEdited.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeEdit: this.nodeEdit, allowEditing: true});
nodeEdit: function(){}		 Event: dataSourceChanged

Event: dataSourceChanged

<TreeViewComponent fields={this.field} allowEditing={true} dataSourceChanged={this.dataSourceChanged.bind(this)}/>

dataSourceChanged(): void {}

Node Selection

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true});		 Property: allowMultiSelection

<TreeViewComponent fields={this.field} allowMultiSelection={true}/>
Triggers before node is selected Event: beforeSelect

React.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeSelect: this.beforeSelect});
beforeSelect: function(){}		 Event: nodeSelecting

<TreeViewComponent fields={this.field} nodeSelecting={this.nodeSelecting.bind(this)}/>

nodeSelecting(): void {}
Fullrowselection Property: fullRowSelect

React.createElement(EJ.TreeView, {id: "tree", fields: fields, fullRowSelect: true});		 Property: fullRowSelect

<TreeViewComponent fields={this.field} fullRowSelect={true}/>
Get selected node Method: getSelectedNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNode();		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNodeIndex();		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNodes();		 Can be achieved using,

<TreeViewComponent fields={this.field} allowMultiSelection={true}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.getSelectedNodesIndex();		 Can be achieved using,

<TreeViewComponent fields={this.field} allowMultiSelection={true}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.isSelected("book");		 Can be achieved using,

<TreeViewComponent fields={this.field}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeSelect: this.nodeSelect});
nodeSelect: function(){}		 Event: nodeSelected

<TreeViewComponent fields={this.field} nodeSelected={this.nodeSelected.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.selectAll();		 Can be achieved using,

<TreeViewComponent fields={this.field} allowMultiSelection={true}/>

public 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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, selectedNode: ['1']});		 Property: selectedNodes

<TreeViewComponent fields={this.field} selectedNodes={this.selectedNode}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.selectNode(["book"]);		 Can be achieved using,

<TreeViewComponent fields={this.field} allowMultiSelection={true}/>

public tree: TreeViewComponent;
tree.selectedNodes=["book"]
Gets/Sets selected nodes Property: selectedNodes

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true, selectedNodes: ['1', '2']});		 Property: selectedNodes

<TreeViewComponent fields={this.field} allowMultiSelection={true} selectedNodes={this.selectedNode}/>
public selectedNodes: string[] = ['1', '2'];
Triggers when node is unselected successfully Event: nodeUnselect

React.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeUnselect: this.nodeUnselect});
nodeUnselect: function(){}		 Event: nodeSelected

<TreeViewComponent fields={this.field} nodeSelected={this.nodeSelected.bind(this)}/>

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.unselectAll();		 Can be achieved using,

<TreeViewComponent fields={this.field} allowMultiSelection={true}/>

public tree: TreeViewComponent;
tree.selectedNodes=[];
To unselect node Method: unselectNode

React.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true});
var treeObj = $(“#tree”).data(“ejTreeView”);
treeObj.unselectNode("book");		 Can be achieved using,

<TreeViewComponent fields={this.field} allowMultiSelection={true}/>

public tree: TreeViewComponent;
var selectedNodes=tree.selectedNodes.pop(book)

Template

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

React.createElement(EJ.TreeView, {id: "tree", fields: fields, template: templateData});		 Property: nodeTemplate

<TreeViewComponent fields={this.field} nodeTemplate={this.templateData}/>
Previous
Next