ASP.NET MVC
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration From Essential JS 1 in ASP.NET MVC TreeView control

23 Feb 2021 / 22 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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
var treeObj = $("#tree").data("ejTreeView");
treeObj.addNode("Node", "#book");		 Method: addNodes

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
var object = [{ id: "temp", name: "New node" }, { id: "new", name: "New node 1" }];
treeObj.addNodes(object, "book");
Triggers before adding node Event: BeforeAdd

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeAdd("beforeAdd")))

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()
var object = [{ id: "1", name: "node" }];
var treeObj = document.getElementById('tree').ej2_instances[0]
var child = treeObj.element.querySelector('[data-uid="book"]');
var parent = child.parentElement.closest('.e-list-item');
var level = parseInt(parent.getAttribute('aria-level'))+1;
var childNodes = Array.from(parent.querySelectorAll('.e-list-item.e-level-'+level))
var index = childNodes.indexOf(child)
treeObj.addNodes(object, "book", index+1);
Adding node before a particular node Method: insertBefore

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()
var object = [{ id: "1", name: "node" }];
var treeObj = document.getElementById('tree').ej2_instances[0]
var child = treeObj.element.querySelector('[data-uid="book"]');
var parent = child.parentElement.closest('.e-list-item');
var level = parseInt(parent.getAttribute('aria-level'))+1;
var childNodes = Array.from(parent.querySelectorAll('.e-list-item.e-level-'+level))
var index = childNodes.indexOf(child)
treeObj.addNodes(object, "book", index-1);
Triggers when node is added successfully Event: NodeAdd

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeAdd("nodeAdd")))

Script
function nodeAdd() {}		 Event: DataSourceChanged

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).DataSourceChanged("DataSourceChanged").Render()

Script

function DataSourceChanged(args){}

Common

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowKeyboardNavigation(false))		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.TemplateFields).KeyPress("onKeyPress").Render()

Script

function onKeyPress(args){
args.cancel = true
}
Triggers before node is cut Event: BeforeCut

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeCut("beforeCut")))
function beforeCut() {}		 Not Applicable
Triggers before node is deleted Event: BeforeDelete

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeDelete("beforeDelete")))
function beforeDelete() {}		 Not Applicable
Triggers before loading nodes Event: BeforeLoad

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeLoad("beforeLoad")))
function beforeLoad() {}		 Not Applicable
Triggers before node is pasted Event: BeforePaste

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforePaste("beforePaste")))
function beforePaste() {}		 Not Applicable
Triggers when Treeview is created Event: Create

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.Create("create")))
function create() {}		 Event: Created

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Created("onCreated").Render()

Script

function onCreated(args){}
Css class Property: CssClass

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).CssClass("custom"))		 Property: CssClass

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).CssClass("custom").Render()
Triggers when Treeview is destroyed Event: Destroy

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.Destroy("destroy")))
function destroy() {}		 Event: Destroyed

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Destroyed("onDestroy").Render()

Script

function onDestroy(args){}
Destroy Treeview control Method: destroy

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.destroy();
Disable Node Method: disableNode

@Html.EJ().TreeView(“tree”).TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.disableNodes(["1", "2"]);
Enable Animation Property: EnableAnimation

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).EnableAnimation(false))		 Property: Animation

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Animation(ViewBag.TreeViewNodeAnimation).Render()

Controller

TreeViewNodeAnimationSettings Animation = new TreeViewNodeAnimationSettings();
List<Object> expand = new List<object>();
expand.Add(new{
duration = 0
});
Animation.Expand = expand[0];
List<Object> collapse = new List<object>();
collapse.Add(new{
duration = 0
});
Animation.Collapse = collapse[0];
ViewBag.TreeViewNodeAnimation = Animation;
Control state Property: Enabled

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).Enabled(false))		 Not Applicable
Enable Node Method: enableNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.enableNodes(["1"]);
Persistence Property: EnablePersistence

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).EnablePersistence(true))		 Property: EnablePersistence

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).EnablePersistence(true).Render()
Right to Left Property: EnableRTL

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).EnableRTL(true))		 Property: EnableRtl

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).EnableRtl(true).Render()
Ensure visibility Method: ensureVisible

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.ensureVisible("1");
Mapping fields Property: TreeViewFields

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields)

Controller
TreeViewFieldsSettings TemplateFields = new TreeViewFieldsSettings();
TreeViewTemplate template = new TreeViewTemplate();
TemplateFields.DataSource = template.getTreeViewTemplate();
TemplateFields.IsChecked = "checked"
TemplateFields.Id = "id";
TemplateFields.Text = "name";
TemplateFields.ParentID = "pid";
TemplateFields.HasChildren = "HasChild";
TemplateFields.Expanded = "Expanded";
TemplateFields.Selected = "Selected";
ViewBag.TemplateFields = TemplateFields;
Get child nodes Method: getChildren

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields)

Script
var instance= document.getElementById("tree").ej2_instances[0];
var parent = instance.element.querySelector('[data-uid="1"]')
console.log(parent.querySelector('.e-list-item'))
Get node Method: getNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.getNode("1");
Get node by index Method: getNodeByIndex

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.element.querySelectorAll('.e-list-item')
console.log(nodes[3]);
Get node count Method: getNodeCount

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes = instance.element.querySelectorAll('.e-list-item')
console.log("Node count is " + nodes.length);
Get node index Method: getNodeIndex

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.element.querySelectorAll('.e-list-item')
var node = instance.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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodeText=instance.getNode("1")['text']
Get updated datasource Method: getTreeData

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.getTreeData();
Get visible nodes Method: getVisibleNodes

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).Height("400px")		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).CssClass("custom").Render()
Css
.e-treeview.custom{
height: 400px;
}
Checking for child nodes Method: hasChildNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('.e-list-parent').style.display="none"
Hide node Method: hideNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('[data-uid="book"]').style.display="none"
HTML Attributes Property: HtmlAttributes

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).HtmlAttributes(htmlAttr)

Script

@{
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add("name", "treeView");
}		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var element= document.getElementById("tree");
element.classList.add("htmlAttr")
To check if child nodes are loaded Method: isChildLoaded

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var parent=instance.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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var node=instance.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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
if (instance.getNode('book')['text']) !== "") {
console.log("Node exists")
}
To check if node is visible Method: isVisible

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
if (instance.element.querySelector('[data-uid="book"]').style.display !== "none"){
console.log("Node is visible")
}
Triggers on key press Event: KeyPress

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.KeyPress("keyPress"))
function keyPress() {}		 Event: KeyPress

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).KeyPress("onKeyPress").Render()

Script

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
TreeViewFieldsSettings data= new TreeViewFieldsSettings();
object dataManager = new DataManager {
Url = "/FileContent/rootNode",
Adaptor = "UrlAdaptor",
CrossDomain = true};
dataManager.executeQuery(new ej.data.Query().take(8).then((e) => { var childData = e.result;
instance.addNodes(childData, "book")
}));
Triggers when data load fails Event: LoadError

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.LoadError("loadError"))
function loadError() {}		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
TreeViewFieldsSettings data= new TreeViewFieldsSettings();
object dataManager = new DataManager {
Url = "/FileContent/rootNode",
Adaptor = "UrlAdaptor",
CrossDomain = true};
dataManager.executeQuery(new ej.data.Query().take(8).error((e) => {
console.log('Data loaded failed')
}));
Load on demand Property: LoadOnDemand

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).LoadOnDemand(true)		 Property: LoadOnDemand

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).LoadOnDemand(true).Render()Treeview is rendered in load on demand by default
Triggers when data load is success Event: LoadSuccess

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.LoadSuccess("loadSuccess"))
function loadSuccess() {}
var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.loadData("childData", "book");		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
TreeViewFieldsSettings data= new TreeViewFieldsSettings();
object 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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.moveNodes("book", "art");
Triggers when node is clicked successfully Event: NodeClick

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeClick("nodeClick"))
function nodeClick() {}		 Event: NodeClicked

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeClicked("onNodeClick").Render()

Script

function onNodeClick(){}
Triggers when node is cut successfully Event: NodeCut

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeCut("nodeCut"))
function nodeCut() {}		 Not Applicable
Triggers when node is deleted successfully Event: NodeDelete

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeDelete("nodeDelete"))
function nodeDelete() {}		 Event: DataSourceChanged

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).DataSourceChanged("DataSourceChanged").Render()

Script

function DataSourceChanged(args){}
Triggers when node is pasted successfully Event: NodePaste

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodePaste("nodePaste"))
function nodePaste() {}		 Not Applicable
Triggers when nodes are loaded successfully Event: Ready

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.Ready("onReady"))
function onReady() {}		 Event: DataBound

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).DataBound("onDataBound").Render()

Script

function onDataBound(){}
Refresh Treeview control Method: refresh

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")))

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('.e-list-parent').style.display="block"
Show node Method: showNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.element.querySelector('[data-uid="book"]').style.display="block"
Remove all Treeview nodes Method: removeAll

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

Script
var treeObj = $("#tree").data("ejTreeView");<br />treeObj.removeAll();		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.removeNodes([instance.element.querySelector('.e-list-parent')])
Remove Treeview node Method: removeNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.removeNodes("book");
Sort order Property: SortSettings

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).SortSettings(s => s.AllowSorting(true).SortOrder(SortOrder.Descending))		 Property: SortOrder

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).SortOrder(SortOrder.Descending).Render()
Update node text Method: updateText

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.updateNode("book", "text");
Width of Treeview control Property: Width

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).Width("300px")		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).CssClass("custom").Render()
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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ShowCheckbox(true).AutoCheck(false)		 Property: AutoCheck

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AutoCheck(false).ShowCheckBox(true).Render()
Prevent indeterminate state in parent node Property: AutoCheckParentNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ShowCheckbox(true).AutoCheckParentNode(true)		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).AutoCheck(false).NodeChecked("nodeChecked").Render()

Script
var treeObj= document.getElementById("tree").ej2_instances[0];
function nodeChecked(args){
var child = treeObj.element.querySelector('[data-uid="' + args.data[0]['id'] + '"]');
var checkNodes = [];
var element = child.parentNode;
while ((element !== null || element !== undefined) && !element.parentNode.classList.contains('e-treeview')) {
element = element.parentNode;
var id = element.getAttribute('data-uid');
if (id !== null) checkNodes.push(element.getAttribute('data-uid'))
}
if (child.querySelector('.e-list-item') !== null && args.isInteracted === true && args.action === 'check') {
treeObj.autoCheck = true;
treeObj.checkAll(child.getAttribute('data-uid'));
} else if (child.querySelector('.e-list-item') !== null && args.isInteracted === true && args.action === 'uncheck') {
treeObj.autoCheck = true;
treeObj.uncheckAll(child.getAttribute('data-uid'));
}
treeObj.autoCheck = false;
if (args.action === 'check') {
treeObj.checkAll(checkNodes)
}
else if (args.action === 'uncheck' && child.parentNode.querySelector('.e-check') === null) {
treeObj.uncheckAll(checkNodes)
}
}
Check all nodes Method: checkAll

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))).ShowCheckbox(true)

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.checkAll();
Check node Method: checkNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))).ShowCheckbox(true)

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.checkAll("book");
Set checkednodes Property: CheckedNodes

List<int> checkedNodes = new List<int>();
checkedNodes.Add(2);
checkedNodes.Add(8);
checkedNodes.Add(12);
@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ShowCheckbox(true).CheckedNodes(ViewBag.checkednodes)		 Property: CheckedNodes

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).CheckedNodes(ViewBag.CheckedNodes).Render()

Controller

ViewBag.CheckedNodes = new string[] { "3", "9", "13" };
Get checked nodes Method: getCheckedNodes

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))).ShowCheckbox(true)

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).Render()

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))).ShowCheckbox(true)

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).CheckedNodes("1").Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes = instance.element.querySelectorAll('.e-list-item')<br />var nodeIndex[];<br />while(i<nodes.length) {<br />if(nodes[i].classList.contains('e-check')) {nodeIndex.push(i);
}
i++
}
console.log(nodeIndex)
To check if nodes are checked Method: isNodeChecked

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))).ShowCheckbox(true)

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var checked=instance.getNode("book")['isChecked']
if (checked === true) {
console.log("Node is checked")
}
Triggers when node is checked successfully Event: NodeCheck

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ShowCheckbox(true)
.ClientSideEvents(events =>events.NodeCheck("nodeCheck"))
function nodeCheck() {}		 Event: nodeChecked

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).NodeChecked("nodeChecked").Render()

Script

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ShowCheckbox(true).ShowCheckbox(true)		 Property: ShowCheckBox

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true)
To uncheck all nodes Method: unCheckAll

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))).ShowCheckbox(true)

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.uncheckAll();
To uncheck node Method: uncheckNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))).ShowCheckbox(true)

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.uncheckAll("book");
Triggers when node is unchecked successfully Event: NodeUncheck

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ShowCheckbox(true)
.ClientSideEvents(events =>events.NodeUncheck("nodeUncheck"))
function nodeUncheck() {}		 Event: nodeChecked

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).NodeChecked("nodeChecked").Render()

Script

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ShowCheckBox(true).NodeChecking("nodeChecking").Render()

Script

function nodeChecking(args){
if (args.action == "check") {}
}

Drag and Drop

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

@Html.EJ().TreeView("tree").TreeViewFields(field =><br />field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true)		 Property: AllowDragAndDrop

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true)
Prevent Drag and drop to another Treeview Property: AllowDragAndDropAcrossControl

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true).AllowDragAndDropAcrossControl(false)		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true).NodeDragStop("dragStop").Render()

Script

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true).AllowDropSibling(false)		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true).NodeDragStop("dragStop").Render()

Script

function dragStop(args){
if(args.dropIndicator === "e-drop-next") {
args.cancel = true;
}
}
Prevent child drop Property: AllowDropChild

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true).AllowDropChild(false)		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true).NodeDragStop("dragStop").Render()

Script

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true)
.ClientSideEvents(events =>events.NodeDrag("nodeDrag"))
function nodeDrag() {}		 Event: NodeDragging

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true).NodeDragging("nodeDrag").Render()

Script

function nodeDrag(){}
Triggers when node drag is started successfully Event: NodeDragStart

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true)
.ClientSideEvents(events =>events.NodeDragStart("nodeDragStart"))
function nodeDragStart() {}		 Event: NodeDragStart

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true).NodeDragStart("nodeDragStart").Render()

Script

function nodeDragStart(){}
Triggers before dragged node drag is stopped Event: NodeDragStop

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true)
.ClientSideEvents(events =>events.NodeDragStop("nodeDragStop"))
function nodeDragStop() {}		 Event: NodeDragStop

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true).NodeDragStop("nodeDragStop").Render()

Script

function nodeDragStop(){}
Triggers when node is dropped successfully Event: NodeDropped

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowDragAndDrop(true)
.ClientSideEvents(events =>events.NodeDropped("nodeDropped"))
function nodeDropped() {}		 Event: NodeDropped

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowDragAndDrop(true).NodeDropped("nodeDropped").Render()

Script

function nodeDropped(){}

Expand/Collapse nodes

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeCollapse("beforeCollapse"))
function beforeCollapse() {}		 Event: NodeCollapsing

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeCollapsing("nodeCollapsing").Render()

Script

function nodeCollapsing(){}
Triggers before node is expanded Event: BeforeExpand

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeExpand("beforeExpand"))
function beforeExpand() {}		 Event: NodeExpanding

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeExpanding("nodeExpanding").Render()

Script

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.collapseAll();
Collapse Node Method: collapseNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.collapseAll("book");
Prevent multiple nodes expand Property: EnableMultipleExpand

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).EnableMultipleExpand(false)		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeExpanding("nodeExpanding").Render()

Script

function nodeExpanding(args){
var parent=args.node.parentNode.closest('.e-list-item');
if (parent === null) parent=args.node.parentNode.closest('.e-treeview');
var children=parent.querySelectorAll('.e-list-item');
var i=0;
var nodes=[];
while(i<children.length){
nodes.push(children[i].getAttribute("data-uid"));
i++;}
this.collapseAll(nodes)
}
Expand all Nodes Method: expandAll

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.expandAll();
Expand Node Method: expandNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.expandAll("1");
Gets/Sets Expanded nodes Property: ExpandedNodes

List<int> ExpandedNodes = new List<int>();
ExpandedNodes.Add(1);
ExpandedNodes.Add(2);
@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ExpandedNodes(ViewBag.ExpandedNodes)		 Property: ExpandedNodes

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ExpandedNodes("1").Render()
Expand action Property: ExpandOn

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).ExpandOn("click")		 Property: ExpandOn

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).ExpandOn(ExpandOnSettings.Click).Render()
Get expanded nodes Method: getExpandedNodes

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

Script
var treeObj = $("#tree").data("ejTreeView");
treeObj.getExpandedNodesIndex();		 Can be achieved using,

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.element.querySelectorAll('.e-list-item')
var nodeIndex;
var i = 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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
if(instance.expandedNodes.indexOf("book") !== -1) {
console.log("Node is expanded")
}
Triggers when node is collapsed successfully Event: NodeCollapse

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeCollapse("nodeCollapse"))
function nodeCollapse() {}		 Event: NodeCollapsed

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeCollapsed("nodeCollapsed").Render()

Script

function nodeCollapsed(){}
Triggers when node is expanded successfully Event: NodeExpand

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeExpand("nodeExpand"))
function nodeExpand() {}		 Event: NodeExpanded

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeExpanded("nodeExpanded").Render()

Script

function nodeExpanded(){}

Node Editing

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowEditing(true)		 Property: AllowEditing

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowEditing(true).Render()
Triggers before node is edited Event: BeforeEdit

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeEdit("beforeEdit"))
function beforeEdit() {}		 Event: NodeEditing

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeEditing("nodeEditing").Render()

Script

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script

var treeObj = document.getElementById('tree').ej2_instances[0]
treeObj.beginEdit("1");
Triggers before node edit is successful Event: InlineEditValidation

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.InlineEditValidation("inlineEditValidation"))
function inlineEditValidation() {}		 Event: NodeEdited

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeEdited("nodeEdited").Render()

Script

function nodeEdited(){}
Triggers when node is edited successfully Event: NodeEdit

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeEdit("nodeEdit"))
function nodeEdit() {}		 Event: DataSourceChanged

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).DataSourceChanged("DataSourceChanged").Render()

Script

function DataSourceChanged(args){}

Node Selection

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowMultiSelection(true)		 Property: AllowMultiSelection

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowMultiSelection(true).Render()
Triggers before node is selected Event: BeforeSelect

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.BeforeSelect("beforeSelect"))
function beforeSelect() {}		 Event: NodeSelecting

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeSelecting("nodeSelecting").Render()

Script

function nodeSelecting(){}
Fullrowselection Property: FullRowSelect

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).FullRowSelect(true)		 Property: FullRowSelect

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).FullRowSelect(true).Render()
Get selected node Method: getSelectedNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowMultiSelection(true))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowMultiSelection(true).Render()

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowMultiSelection(true))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowMultiSelection(true).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
var nodes=instance.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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
if (instance.selectedNodes.indexOf("book") !== -1) {
console.log("Node is selected")
}
Triggers when node is selected successfully Event: NodeSelect

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeSelect("nodeSelect"))
function nodeSelect() {}		 Event: NodeSelected

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeSelected("nodeSelected").Render()

Script

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowMultiSelection(true))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowMultiSelection(true).Render()

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

List<int> SelectedNode = new List<int>();
SelectedNode.Add(1);
@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).SelectedNode(ViewBag.SelectedNode)		 Property: SelectedNodes

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).SelectedNodes("1").Render()
Select node Method: selectNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.selectedNodes=["book"]
Gets/Sets selected nodes Property: SelectedNodes

List<int> SelectedNode = new List<int>();
SelectedNode.Add(1);
SelectedNode.Add(2);
@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).SelectedNodes(ViewBag.SelectedNode))		 Property: SelectedNodes

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowMultiSelection(true).SelectedNodes(["1","2"]).Render();
Triggers when node is unselected successfully Event: NodeUnselect

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text"))
.ClientSideEvents(events =>events.NodeUnselect("nodeUnselect"))
function nodeUnselect() {}		 Event: NodeSelected

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeSelected("nodeSelected").Render()

Script

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowMultiSelection(true))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowMultiSelection(true).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.selectedNodes=[];
To unselect node Method: unselectNode

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).AllowMultiSelection(true))

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

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).AllowMultiSelection(true).Render()

Script
var instance= document.getElementById("tree").ej2_instances[0];
instance.selectedNodes.pop(book)

Template

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

@Html.EJ().TreeView("tree").TreeViewFields(field =>
field.Datasource((IEnumerable<LoadData>)ViewBag.datasource)
.Id("Id").ParentId("Parent").Text("Text")).Template("templateData")		 Property: NodeTemplate

@Html.EJS().TreeView("tree").Fields(ViewBag.Fields).NodeTemplate("templateData").Render()
Previous
Next