This article describes the API migration process of TreeView component from Essential JS 1 to Essential JS 2.
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){} |
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; } |
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: CheckedNodesList<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") {} } |
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(){} |
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: ExpandedNodesList<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(){} |
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){} |
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: SelectedNodeList<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: SelectedNodesList<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) |
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() |