Ej1 api migration in React TreeView component

23 Jan 202524 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}/>