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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.addNode("node", "book"); |
Method: addNodes<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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: before-add<ej-tree-view id="tree" before-add="beforeAdd"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeAdd(){} |
Not Applicable |
Adding node after a particular node | Method: insertAfter<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.insertAfter("node", "book"); |
Can be achieved using<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> var object = [{ id: "1", name: "node" }]; 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.insertAfter("node", "book"); |
Can be achieved using<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> var object = [{ id: "1", name: "node" }]; 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: node-add<ej-tree-view id="tree" node-add="nodeAdd"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeAdd(){} |
Event: dataSourceChanged<ejs-treeview id="tree" dataSourceChanged="dataSourceChanged"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function dataSourceChanged(){} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Keyboard Navigation | Property: allow-keyboard-navigation<ej-tree-view id="tree" allow-keyboard-navigation=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Can be achieved using,<ejs-treeview id="tree" keyPress="onKeyPress"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function onKeyPress(args){ args.cancel = true; } |
Triggers before node is cut | Event: before-cut<ej-tree-view id="tree" before-cut="beforeCut"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeCut(){} |
Not Applicable |
Triggers before node is deleted | Event: before-delete<ej-tree-view id="tree" before-delete="beforeDelete"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeDelete(){} |
Not Applicable |
Triggers before loading nodes | Event: before-load<ej-tree-view id="tree" before-load="beforeLoad"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeLoad(){} |
Not Applicable |
Triggers before node is pasted | Event: before-paste<ej-tree-view id="tree" before-paste="beforePaste"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforePaste(){} |
Not Applicable |
Triggers when Treeview is created | Event: create<ej-tree-view id="tree" create="onCreate"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function onCreate(){} |
Event: created<ejs-treeview id="tree" created="onCreated"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function onCreated(){} |
Css class | Property: css-class<ej-tree-view id="tree" css-class="custom"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: cssClass<ejs-treeview id="tree" cssClass="custom"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Triggers when Treeview is destroyed | Event: destroy<ej-tree-view id="tree" destroy="onDestroy"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function onDestroy(){} |
Event: destroyed<ejs-treeview id="tree" destroyed="onDestroyed"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function onDestroyed(){} |
Destroy Treeview control | Method: destroy<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.destroy(); |
Method: destroy<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.destroy(); |
Disable Node | Method: disableNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.disableNode("1"); |
Method: disableNodes<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.disableNodes(["1", "2"]); |
Enable Animation | Property: enable-animation<ej-tree-view id="tree" enable-animation=false><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: animation<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" animation="ViewBag.TreeViewNodeAnimation" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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<ej-tree-view id="tree" enabled=false><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Not Applicable |
Enable Node | Method: enableNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.enableNode("1"); |
Method: enableNodes<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.enableNodes(["1", "2"]); |
Persistence | Property: enable-persistence<ej-tree-view id="tree" enable-persistence=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: enablePersistence<ejs-treeview id="tree" enablePersistence=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Right to Left | Property: enable-rtl<ej-tree-view id="tree" enable-rtl=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: enableRtl<ejs-treeview id="tree" enableRTL=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Ensure visibility | Method: ensureVisible<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.ensureVisible("1"); |
Method: ensureVisible<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.ensureVisible("1"); |
Mapping fields | Property: e-tree-view-fields<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name" is-checked="checked" selected="selected" sprite-css-class="custom" image-url="imageUrl" link-attribute="linkAttribute" html-attribute="htmlAttributes" image-attribute="img"></e-tree-view-fields></ej-tree-view> |
Property: e-treeview-fields<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded" htmlAttribute="htmlAttributes" imageAttribute="img" imageUrl="imageUrl" isChecked="checked" linkAttribute="linkAttribute" query=null selected="selected" spriteCssClass="custom" tableName=null> </e-treeview-fields></ejs-treeview> |
Get child nodes | Method: getChildren<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getChildren("1"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getNode("1"); |
Method: getNode<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.getNode("1"); |
Get node by index | Method: getNodeByIndex<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getNodeByIndex(3); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getNodeCount(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getNodeIndex("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getParent("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getText("1"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; var nodeText=instance.getNode("1")['text'] |
Get updated datasource | Method: getTreeData<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getTreeData(); |
Method: getTreeData<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.getTreeData(); |
Get visible nodes | Method: getVisibleNodes<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getVisibleNodes(); |
Not Applicable |
Height of Treeview control | Property: height<ej-tree-view id="tree" height="400px"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Can be achieved using, <ejs-treeview id="tree" cssClass="custom"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Css .e-treeview.custom{ height: 400px; } |
Checking for child nodes | Method: hasChildNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.hasChildNode("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.hide(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; instance.element.querySelector('.e-list-parent').style.display="none" |
Hide node | Method: hideNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.hideNode("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; instance.element.querySelector('[data-uid="book"]').style.display="none" |
HTML Attributes | Property: html-attributes<ej-tree-view id="tree" html-attributes="htmlAttr"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script @{ Dictionary<string, object> htmlAttr = new Dictionary<string, object>(); htmlAttr.Add("name", "treeView"); } |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var element= document.getElementById("tree"); element.classList.add("htmlAttr") |
To check if child nodes are loaded | Method: isChildLoaded<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.isChildLoaded("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.isDisabled("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.isExist("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.isVisible("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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: key-press<ej-tree-view id="tree" key-press="keyPress"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function keyPress(){} |
Event: keyPress<ejs-treeview id="tree" keyPress="onKeyPress"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function onKeyPress(){} |
Load Treeview nodes from particular URl | Method: loadData<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.loadData("childData", "book"); |
Can be achieved using,<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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: load-error<ej-tree-view id="tree" load-error="loadError"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function loadError(){} |
Can be achieved using,<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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: load-on-demand<ej-tree-view id="tree" load-on-demand=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: loadOnDemand<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" loadOnDemand=true id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Treeview is rendered in load on demand by default |
Triggers when data load is success | Event: load-success<ej-tree-view id="tree" load-success="loadSuccess"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function loadSuccess(){} treeObj.loadData("childData", "book"); |
Can be achieved using,<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.moveNode("book", "art"); |
Method: moveNodes<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.moveNodes(["book"], "art"); |
Triggers when node is clicked successfully | Event: node-click<ej-tree-view id="tree" node-click="nodeClick"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeClick(){} |
Event: nodeClicked<ejs-treeview id="tree" nodeClicked="onNodeClicked"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function onNodeClicked(){} |
Triggers when node is cut successfully | Event: node-cut<ej-tree-view id="tree" node-cut="nodeCut"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeCut(){} |
Not Applicable |
Triggers when node is deleted successfully | Event: node-delete<ej-tree-view id="tree" node-delete="nodeDelete"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeDelete(){} |
Event: dataSourceChanged<ejs-treeview id="tree" dataSourceChanged="dataSourceChanged"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function dataSourceChanged(){} |
Triggers when node is pasted successfully | Event: node-paste<ej-tree-view id="tree" node-paste="nodePaste"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodePaste(){} |
Not Applicable |
Triggers when nodes are loaded successfully | Event: ready<ej-tree-view id="tree" ready="onReady"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function onReady(){} |
Event: dataBound<ejs-treeview id="tree" dataBound="onDataBound"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function onDataBound(){} |
Refresh Treeview control | Method: refresh<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.refresh(); |
Not Applicable |
To show all nodes | Method: show<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.show(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; instance.element.querySelector('.e-list-parent').style.display="block" |
Show node | Method: showNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.showNode("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; instance.element.querySelector('[data-uid="book"]').style.display="block" |
Remove all Treeview nodes | Method: removeAll<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.removeAll(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; instance.removeNodes([instance.element.querySelector('.e-list-parent')]) |
Remove Treeview node | Method: removeNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.removeNode("book"); |
Method: removeNodes<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.removeNodes(["book"]); |
Sort order | Property: sort-settings $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, sortSettings: { allowSorting: true, sortOrder: ej.sortOrder.Descending } }); |
Property: sortOrder<ejs-treeview id="tree" sortOrder="Descending"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Update node text | Method: updateText<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.updateText("book", "text"); |
Method: updateNode<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.updateNode("book", "text"); |
Width of Treeview control | Property: width<ej-tree-view id="tree" width="300px"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Can be achieved using, <ejs-treeview id="tree" cssClass="custom"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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: auto-check<ej-tree-view id="tree" auto-check=false show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: autoCheck<ejs-treeview id="tree" autoCheck=false showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Prevent indeterminate state in parent node | Property: auto-check-parent-node<ej-tree-view id="tree" auto-check-parent-node=false show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Can be achieved using,<ejs-treeview id="tree" autoCheck=false showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.checkAll(); |
Method: checkAll<ejs-treeview id="tree" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.checkAll(); |
Check node | Method: checkNode<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.checkNode("book"); |
Method: checkAll<ejs-treeview id="tree" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.checkAll(["book"]); |
Set checkednodes | Property: checked-nodes<ej-tree-view id="tree" checked-nodes="ViewBag.checkedNodes" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Controller int checkedNodes[] = [2, 8, 12]; ViewBag.checkedNodes = checkedNodes; |
Property: checkedNodes<ejs-treeview id="tree" checkedNodes="ViewBag.checkedNodes" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Controller string checkedNodes[] = ["3", "9", "13"]; ViewBag.checkedNodes = checkedNodes; |
Get checked nodes | Method: getCheckedNodes<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getCheckedNodes(); |
Can be achieved using,<ej-tree-view id="tree" showCheckBox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getCheckedNodesIndex(); |
Can be achieved using,<ej-tree-view id="tree" showCheckBox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; var nodes = instance.element.querySelectorAll('.e-list-item') var nodeIndex[]; while(i<nodes.length) { if(nodes[i].classList.contains('e-check')) {nodeIndex.push(i); } i++ } console.log(nodeIndex) |
To check if nodes are checked | Method: isNodeChecked<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.isNodeChecked("book"); |
Can be achieved using,<ej-tree-view id="tree" showCheckBox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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: node-check<ej-tree-view id="tree" node-check="nodeCheck" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeCheck(){} |
Event: nodeChecked<ejs-treeview id="tree" nodeChecked="nodeChecked" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeChecked(args){ if (args.action == "check") {} } |
Checkbox support | Property: show-checkbox<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: showCheckBox<ejs-treeview id="tree" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
To uncheck all nodes | Method: unCheckAll<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.unCheckAll(); |
Method: uncheckAll<ejs-treeview id="tree" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.uncheckAll(); |
To uncheck node | Method: uncheckNode<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.uncheckNode("book"); |
Method: uncheckAll<ejs-treeview id="tree" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.uncheckAll(["book"]); |
Triggers when node is unchecked successfully | Event: node-uncheck<ej-tree-view id="tree" node-uncheck="nodeUncheck" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeUncheck(){} |
Event: nodeChecked<ejs-treeview id="tree" nodeChecked="nodeChecked" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeChecked(args){ if (args.action == "un-check") {} } |
Triggers before nodes are checked/ unchecked | Not Applicable | Event: nodeChecking<ejs-treeview id="tree" nodeChecking="nodeChecking" showCheckBox=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeChecking(args){ if (args.action == "un-check") {} } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Drag and drop | Property: allow-drag-and-drop<ejs-treeview id="tree" allow-drag-and-drop=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Property: allowDragAndDrop<ejs-treeview id="tree" allowDragAndDrop=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Prevent Drag and drop to another Treeview | Property: allow-drag-and-drop-across-control<ejs-treeview id="tree" allow-drag-and-drop=true allow-drag-and-drop-across-control=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Can be achieved using, <ejs-treeview id="tree" nodeDragStop="nodeDragStop" allowDragAndDrop=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeDragStop(args){ if (args.draggedParentNode.closest('.e-treeview') !== args.dropTarget.closest('.e-treeview')) { args.cancel = true; }} |
Prevent sibling drop | Property: allow-drop-sibling<ejs-treeview id="tree" allow-drag-and-drop=true allow-drop-sibling=false> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Can be achieved using,<ej-tree-view id="tree" node-drag-stop="nodeDragStop" allow-drag-and-drop=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeDragStop(args){ if(args.dropIndicator === "e-drop-next") { args.cancel = true; } } |
Prevent child drop | Property: allow-drop-child<ejs-treeview id="tree" allow-drag-and-drop=true allow-drop-child=false> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Can be achieved using,<ej-tree-view id="tree" node-drag-stop="nodeDragStop" allow-drag-and-drop=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeDragStop(args){ if(args.dropIndicator === "e-drop-in") { args.cancel = true; } } |
Triggers when node is dragged | Event: node-drag<ej-tree-view id="tree" node-drag="nodeDrag" allow-drag-and-drop=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeDrag(){} |
Event: nodeDragging<ejs-treeview id="tree" allowDragAndDrop=true nodeDragging="nodeDragging"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeDragging(){} |
Triggers when node drag is started successfully | Event: node-drag-start<ej-tree-view id="tree" node-drag-start="nodeDragStart" allow-drag-and-drop=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeDragStart(){} |
Event: nodeDragStart<ejs-treeview id="tree" allowDragAndDrop=true nodeDragStart="nodeDragStart"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeDragStart(){} |
Triggers before dragged node drag is stopped | Event: node-drag-stop<ej-tree-view id="tree" node-drag-stop="nodeDragStop" allow-drag-and-drop=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeDragStop(){} |
Event: nodeDragStop<ejs-treeview id="tree" allowDragAndDrop=true nodeDragStop="nodeDragStop"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeDragStop(){} |
Triggers when node is dropped successfully | Event: node-dropped<ej-tree-view id="tree" node-dropped="nodeDropped" allow-drag-and-drop=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeDropped(){} |
Event: nodeDropped<ejs-treeview id="tree" allowDragAndDrop=true nodeDropped="nodeDropped"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeDropped(){} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Triggers before node is collapsed | Event: before-collapse<ej-tree-view id="tree" before-collapse="beforeCollapse"> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeCollapse(){} |
Event: nodeCollapsing<ejs-treeview id="tree" nodeCollapsing="nodeCollapsing"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeCollapsing(){} |
Triggers before node is expanded | Event: before-expand<ej-tree-view id="tree" before-expand="beforeExpand"> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeExpand(){} |
Event: nodeExpanding<ejs-treeview id="tree" nodeExpanding="nodeExpanding"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeExpanding(){} |
Collapse all nodes | Method: collapseAll<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.collapseAll(); |
Method: collapseAll<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.collapseAll(); |
Collapse Node | Method: collapseNode<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.collapseNode("1"); |
Method: collapseAll<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.collapseAll(["1"]); |
Prevent multiple nodes expand | Property: enable-multiple-expand<ej-tree-view id="tree" enable-multiple-expand=false><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Can be achieved using,<ej-tree-view id="tree" nodeExpanding="nodeExpanding"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeExpanding(){ var parent=args.node.parentNode.closest('.e-list-item'); if (parent === null) parent=args.node.parentNode.closest('.e-treeview'); var children=parent.querySelectorAll('.e-list-item'); var i=0; var nodes=[]; while(i<children.length){<br/>nodes.push(children[i].getAttribute("data-uid")); i++;} this.collapseAll(nodes) } |
Expand all Nodes | Method: expandAll<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.expandAll(); |
Method: expandAll<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.expandAll(); |
Expand Node | Method: expandNode<ej-tree-view id="tree" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.expandNode("1"); |
Method: expandAll<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.expandAll(["1"]); |
Gets/Sets Expanded nodes | Property: expanded-nodes<ej-tree-view id="tree" expanded-nodes="ViewBag.expandedNodes"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Controller int[] expandedNodes = {1, 2}; ViewBag.expandedNodes = expandedNodes; |
Property: expandedNodes<ejs-treeview id="tree" expandedNodes="ViewBag.expandedNodes"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Controller string[] expandedNodes = {"1", "2"}; ViewBag.expandedNodes = expandedNodes; |
Expand action | Property: expand-on<ej-tree-view id="tree" expand-on="click"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: expandOn<ejs-treeview id="tree" expandOn="Click"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Get expanded nodes | Method: getExpandedNodes<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getExpandedNodes(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getExpandedNodesIndex(); |
Not Applicable |
To check if node is expanded | Method: isExpanded<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.isExpanded("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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: node-collapse<ej-tree-view id="tree" node-collapse="nodeCollapsed"> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeCollapsed(){} |
Event: nodeCollapsed<ejs-treeview id="tree" nodeCollapsed="nodeCollapsed"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeCollapsed(){} |
Triggers when node is expanded successfully | Event: node-expand<ej-tree-view id="tree" node-expand="nodeExpanded"> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeExpanded(){} |
Event: nodeExpanded<ejs-treeview id="tree" nodeExpanded="nodeExpanded"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeExpanded(){} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Editing | Property: allow-editing<ej-tree-view id="tree" allow-editing=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: allowEditing<ejs-treeview id="tree" allowEditing=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Triggers before node is edited | Event: before-edit<ej-tree-view id="tree" before-edit="beforeEdit" allow-editing=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeEdit(){} |
Event: nodeEditing<ejs-treeview id="tree" nodeEditing="nodeEditing" allowEditing=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeEditing(){} |
To Enable editing programatically | Not Applicable | Method: beginEdit<ejs-treeview id="tree"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script var treeObj = document.getElementById('tree').ej2_instances[0] treeObj.beginEdit("1"); |
Triggers before node edit is successful | Event: inline-edit-validation<ej-tree-view id="tree" inline-edit-validation="inlineEditValidation" allow-editing=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function inlineEditValidation(){} |
Event: nodeEdited<ejs-treeview id="tree" nodeEdited="nodeEdited" allowEditing=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeEdited(){} |
Triggers when node is edited successfully | Event: node-edit<ej-tree-view id="tree" node-edit="nodeEdit" allow-editing=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeEdit(){} |
Event: dataSourceChanged<ejs-treeview id="tree" dataSourceChanged="dataSourceChanged"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function dataSourceChanged(){} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Multi-selection | Property: allow-multi-selection<ej-tree-view id="tree" allow-multi-selection=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: allowMultiSelection<ejs-treeview id="tree" allowMultiSelection=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Triggers before node is selected | Event: before-select<ej-tree-view id="tree" before-select="beforeSelect"> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function beforeSelect(){} |
Event: nodeSelecting<ejs-treeview id="tree" nodeSelecting="nodeSelecting"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeSelecting(){} |
Fullrowselection | Property: full-row-select<ej-tree-view id="tree" full-row-select=true> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: fullRowSelect<ejs-treeview id="tree" fullRowSelect=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |
Get selected node | Method: getSelectedNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getSelectedNode(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getSelectedNodeIndex(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getSelectedNodes(); |
Can be achieved using,<ejs-treeview id="tree" allowMultiSelection=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.getSelectedNodesIndex(); |
Can be achieved using,<ejs-treeview id="tree" allowMultiSelection=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> 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<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.isSelected("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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: node-select<ej-tree-view id="tree" node-select="nodeSelect"> <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script function nodeSelect(){} |
Event: nodeSelected<ejs-treeview id="tree" nodeSelected="nodeSelected"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Script function nodeSelected(){ if (args.action =="select") {} } |
Select all nodes | Method: selectAll<ej-tree-view id="tree" allow-multi-selection=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.selectAll(); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> 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: selected-node<ej-tree-view id="tree" selected-node="ViewBag.selectedNode" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Controller int selectedNode = 1; ViewBag.selectedNode = selectedNode; |
Property: selectedNodes<ejs-treeview id="tree" selectedNodes="ViewBag.selectedNodes"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Controller string[] selectedNodes = {"1"}; ViewBag.selectedNodes = selectedNodes; |
Select node | Method: selectNode<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var treeObj = $(“#tree").data(“ejTreeView”); treeObj.selectNode("book"); |
Can be achieved using,<ej-tree-view id="tree"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Script var instance= document.getElementById("tree").ej2_instances[0]; instance.selectedNodes=["book"] |
Gets/Sets selected nodes | Property: selected-nodes<ej-tree-view id="tree" selected-nodes="ViewBag.selectedNodes" show-checkbox=true><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> Controller int[] selectedNodes = {1, 2}; ViewBag.selectedNodes = selectedNodes; |
Property: selectedNodes<ejs-treeview id="tree" selectedNodes="ViewBag.selectedNodes" allowMultiSelection=true> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> Controller string[] selectedNodes = {"1", "2"}; ViewBag.selectedNodes = selectedNodes; |
Triggers when node is unselected successfully | Event: node-unselect # Migration from Essential JS 1 |
This article describes the API migration process of TreeView component from Essential JS 1 to Essential JS <br />
<br /><br />**Script**<br /><br />
function nodeUnselect(){}| **Event:** *nodeSelected*<br/><br/>
<br />
<br />
<br /><br />**Script**<br />
function nodeSelected(){<br/>
if (args.action ==“un-select”) {}<br/>
}|
| To unselect all nodes | **Method:** *unselectAll*<br/><br/>
<br /><br />**Script**<br /><br />
var treeObj = $(“#tree”).data(“ejTreeView”);<br />
treeObj.unselectAll();| **Can be achieved using,**<br/><br/>
<br/><br/>**Script**<br/>
var instance= document.getElementById(“tree”).ej2instances[0];<br/>
instance.selectedNodes=[];|
| To unselect node | **Method:** *unselectNode*<br/><br/>
<br /><br />**Script**<br /><br />
var treeObj = $(“#tree”).data(“ejTreeView”);<br />
treeObj.unselectNode(“book”);| **Can be achieved using,**<br/><br/>
<br/><br/>**Script**<br/>
var instance= document.getElementById(“tree”).ej2instances[0];<br/>
instance.selectedNodes.pop(book)` |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Custom template | Property: template<ej-tree-view id="tree" template="templateData"><br /><e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name"></e-tree-view-fields></ej-tree-view> |
Property: nodeTemplate<ejs-treeview id="tree" nodeTemplate="templateData"> <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"> </e-treeview-fields></ejs-treeview> |