Contents
- Add nodes
- Common
- CheckBox
- Drag and Drop
- Expand/Collapse nodes
- Node Editing
- Node Selection
- Template
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 TypeScript Treeview control
6 May 202524 minutes to read
This article describes the API migration process of TreeView control from Essential® JS 1 to Essential® JS 2.
Add nodes
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Add node |
Method: addNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.addNode(“Node”, “#book”); |
Method: addNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, }); treeObj.appendTo(“#tree”); var object = [{ id: “temp”, name: “New node” }, { id: “new”, name: “New node 1” }]; treeObj.addNodes(object, “book”); |
Triggers before adding node |
Event: beforeAdd $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforeAdd: function() {} }); |
Not Applicable |
Adding node after a particular node |
Method: insertAfter $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “node”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.insertAfter(“node”, “book”); |
Can be achieved using let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, }); treeObj.appendTo(“#tree”); let object: Object = [{ id: “1”, name: “node” }]; let child: Element = treeObj.element.querySelector(‘[data-uid=”book”]’); let parent: Element = child.parentElement.closest(‘.e-list-item’); let level: number = parseInt(parent.getAttribute(‘aria-level’))+1; let childNodes: Element[] = Array.from(parent.querySelectorAll(‘.e-list-item.e-level-‘+level)) let index: number = childNodes.indexOf(child) treeObj.addNodes(object, “book”, index+1); |
Adding node before a particular node |
Method: insertBefore $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.insertBefore(“node”, “book”); |
Can be achieved using let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, }); treeObj.appendTo(“#tree”); let object: Object = [{ id: “1”, name: “node” }]; let child: Element = treeObj.element.querySelector(‘[data-uid=”book”]’); let parent: Element = child.parentElement.closest(‘.e-list-item’); let level: number = parseInt(parent.getAttribute(‘aria-level’))+1; let childNodes: Element[] = Array.from(parent.querySelectorAll(‘.e-list-item.e-level-‘+level)) let index: number = childNodes.indexOf(child) treeObj.addNodes(object, “book”, index-1); |
Triggers when node is added successfully |
Event: nodeAdd $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeAdd: function() {} }); |
Event: dataSourceChanged let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, dataSourceChanged: function() {} }); treeObj.appendTo(“#tree”); |
Common
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Keyboard Navigation |
Property: allowKeyboardNavigation $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowKeyboardNavigation: false }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, keyPress: function(args) { args.cancel = true; } }); treeObj.appendTo(“#tree”); |
Triggers before node is cut |
Event: beforeCut $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforeCut: function() {} }); |
Not Applicable |
Triggers before node is deleted |
Event: beforeDelete $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforeDelete: function() {} }); |
Not Applicable |
Triggers before loading nodes |
Event: beforeLoad $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforeLoad: function() {} }); |
Not Applicable |
Triggers before node is pasted |
Event: beforePaste $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforePaste: function() {} }); |
Not Applicable |
Triggers when Treeview is created |
Event: create $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, create: function() {} }); |
Event: created let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, created: function() {} }); treeObj.appendTo(“#tree”); |
Css class |
Property: cssClass $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, cssClass: ‘custom’ }); |
Property: cssClass let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, cssClass: ‘custom’ }); treeObj.appendTo(“#tree”); |
Triggers when Treeview is destroyed |
Event: destroy $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, destroy: function() {} }); |
Event: destroyed let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, destroyed: function() {} }); treeObj.appendTo(“#tree”); |
Destroy Treeview control |
Method: destroy $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.destroy(); |
Method: destroy let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.destroy(); |
Disable Node |
Method: disableNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.disableNode($(“#1”)); |
Method: disableNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.disableNodes([“1”, “2”]); |
Enable Animation |
Property: enableAnimation $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, enableAnimation: false }); |
Property: animation let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, animation: {expand: {duration: 0}, collapse: {duration: 0}} }); treeObj.appendTo(“#tree”); |
Control state |
Property: enabled $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, enabled: false }); |
Not Applicable |
Enable Node |
Method: enableNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.enableNode($(“#1”)); |
Method: enableNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.enableNodes([“1”, “2”]); |
Persistence |
Property: enablePersistence $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, enablePersistence: true }); |
Property: enablePersistence let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, enablePersistence: true }); treeObj.appendTo(“#tree”); |
Right to Left |
Property: enableRTL $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, enableRTL: true }); |
Property: enableRtl let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, enableRtl: true }); treeObj.appendTo(“#tree”); |
Ensure visibility |
Method: ensureVisible $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.ensureVisible($(“#1”)); |
Method: ensureVisible let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.ensureVisible(“1”); |
Mapping fields |
Property: fields $(“#tree”).ejTreeView({ fields: {dataSource: [], id: “id”, parentId: “pid”, text: “name”,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 let treeObj: TreeView = new TreeView({ fields: { dataSource: [], id: “id”, text: “name”, child: ‘child’, parentID: ‘pid’, hasChildren: ‘hasChild’, expanded: ‘expanded’, htmlAttributes: ‘htmlAttributes’, iconCss: ‘iconCss’, imageUrl: ‘imageUrl’, isChecked: ‘checked’, query: null, selected: ‘selected’, tableName: null, tooltip: ‘tooltip’, navigateUrl: ‘navigateUrl’}, }); treeObj.appendTo(“#tree”); |
Get child nodes |
Method: getChildren $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getChildren(“1”); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let parent: Element=treeObj.element.querySelector(‘[data-uid=”1”]’) console.log(parent.querySelector(‘.e-list-item’)) |
Get node |
Method: getNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNode($(“#1”)); |
Method: getNode let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.getNode(“1”); |
Get node by index |
Method: getNodeByIndex $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNodeByIndex(3); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’) console.log(nodes[3]); |
Get node count |
Method: getNodeCount $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNodeCount(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’) console.log(“Node count is “ + nodes.length); |
Get node index |
Method: getNodeIndex $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNodeIndex($(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’) let node: Element = treeObj.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 $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getParent($(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let child: Element=treeObj.element.querySelector(‘[data-uid=”’ + “book” + ‘”]’); let parent: Element = child.parentNode.closest(‘.e-list-item’) console.log(parent) |
Get tree node text |
Method: getText $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getText(“1”); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let nodeText: string =treeObj.getNode("1")['text'] console.log(nodeText) |
Get updated datasource |
Method: getTreeData $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getTreeData(); |
Method: getTreeData let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.getTreeData(); |
Get visible nodes |
Method: getVisibleNodes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getVisibleNodes(); |
Not Applicable |
Height of Treeview control |
Property: height $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, height: “400px” }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, cssClass: “custom” }); treeObj.appendTo(“#tree”); Css .e-treeview.custom{ height: 400px; } |
Checking for child nodes |
Method: hasChildNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.hasChildNode($(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let parent: Element=treeObj.element.querySelector(‘[data-uid=”book”]’) if (parent.querySelector(‘.e-list-item’) !== null) { console.log(“Has child node”) } |
Hide all nodes |
Method: hide $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.hide(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.element.querySelector(‘.e-list-parent’).style.display=”none” |
Hide node |
Method: hideNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.hideNode($(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.element.querySelector(‘[data-uid=”book”]’).style.display=”none” |
HTML Attributes |
Property: htmlAttributes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, htmlAttributes: {class: “htmlAttr”} }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.element.classList.add(“htmlAttr”) |
To check if child nodes are loaded |
Method: isChildLoaded $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isChildLoaded($(“book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let parent: Element=treeObj.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 $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isDisabled($(“book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let node: Element=treeObj.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 $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isExist($(“book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); if ((treeObj.getNode('book')['text']) !== "") { console.log("Node exists") }
|
To check if node is visible |
Method: isVisible $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isVisible($(“book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); if (treeObj.element.querySelector(‘[data-uid=”book”]’).style.display !== “none”){ console.log(“Node is visible”) } |
Triggers on key press |
Event: keyPress $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, keyPress: function() {} }); |
Event: keyPress let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, keyPress: function() {} }); treeObj.appendTo(“#tree”); |
Load Treeview nodes from particular URl |
Method: loadData $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.loadData(“childData”, $(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); var dataManager = new DataManager { Url = “/FileContent/rootNode”, Adaptor = “UrlAdaptor”, CrossDomain = true}; dataManager.executeQuery(new ej.data.Query().take(8).then((e) => { var childData = e.result; treeObj.addNodes(childData, “book”) })); |
Triggers when data load fails |
Event: loadError $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, loadError: function() {} }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); var dataManager = new DataManager { Url = “/FileContent/rootNode”, Adaptor = “UrlAdaptor”, CrossDomain = true}; dataManager.executeQuery(new ej.data.Query().take(8).error((e) => { console.log(‘Data load failed’) })); |
Load on demand |
Property: loadOnDemand $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, loadOnDemand: true }); |
Property: loadOnDemand let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, loadOnDemand: false }); treeObj.appendTo(“#tree”); Treeview is rendered in load on demand by default |
Triggers when data load is success |
Event: loadSuccess $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, loadSuccess: function() {} }); treeObj.loadData(“childData”, $(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); var dataManager = new DataManager { Url = “/FileContent/rootNode”, Adaptor = “UrlAdaptor”, CrossDomain = true}; dataManager.executeQuery(new ej.data.Query().take(8).then((e) => { console.log(‘Data loaded successfully’) })); |
To move node |
Method: moveNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.moveNode($(“#book”), “#art”); |
Method: moveNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, }); treeObj.appendTo(“#tree”); treeObj.moveNodes([“book”], “#art”); |
Triggers when node is clicked successfully |
Event: nodeClick $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeClick: function() {} }); |
Event: nodeClicked let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeClicked: function() {} }); treeObj.appendTo(“#tree”); |
Triggers when node is cut successfully |
Event: nodeCut $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeCut: function() {} }); |
Not Applicable |
Triggers when node is deleted successfully |
Event: nodeDelete $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeDelete: function() {} }); |
Event: dataSourceChanged let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, dataSourceChanged: function() {} }); treeObj.appendTo(“#tree”); |
Triggers when node is pasted successfully |
Event: nodePaste $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodePaste: function() {} }); |
Not Applicable |
Triggers when nodes are loaded successfully |
Event: ready $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, ready: function() {} }); |
Event: dataBound let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, dataBound: function() {} }); treeObj.appendTo(“#tree”); |
Refresh Treeview control |
Method: refresh $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.refresh(); |
Not Applicable |
To show all nodes |
Method: show $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.show(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.element.querySelector(‘.e-list-parent’).style.display=”block” |
Show node |
Method: showNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.showNode($(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.element.querySelector(‘[data-uid=”book”]’).style.display=”block” |
Remove all Treeview nodes |
Method: removeAll $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.removeAll(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.removeNodes([treeObj.element.querySelector(‘.e-list-parent’)]) |
Remove Treeview node |
Method: removeNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.removeNode($(“#book”)); |
Method: removeNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, }); treeObj.appendTo(“#tree”); treeObj.removeNodes([“book”]); |
Sort order |
Property: sortSettings $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, sortSettings: { allowSorting: true, sortOrder: ej.sortOrder.Descending } }); |
Property: sortOrder let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, sortOrder: “Descending” }); treeObj.appendTo(“#tree”); |
Update node text |
Method: updateText $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.updateText($(“#book”, “text”)); |
Method: updateNode let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, }); treeObj.appendTo(“#tree”); treeObj.updateNode(“book”, “text”); |
Width of Treeview control |
Property: width $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, width: “300px” }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, cssClass: “custom” }); treeObj.appendTo(“#tree”); Css .e-treeview.custom{ width: 300px; } |
CheckBox
Behavior | API in Essential® JS 1 | API in Essential® JS 2 | ||
---|---|---|---|---|
Prevent auto-check of child and parent |
Property: autoCheck $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true, autoCheck: false }); |
Property: autoCheck let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true, autoCheck: false }); treeObj.appendTo(“#tree”); |
||
Prevent indeterminate state in parent node |
Property: autoCheckParentNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true, autoCheckParentNode: true }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true, autoCheck: false, nodeChecked: function(args){ let child: Element = treeObj.element.querySelector(‘[data-uid=”’ + args.data[0][‘id’] + ‘”]’); let checkNodes = []; let element: Element = child.parentNode; while ((element !== null |
element !== undefined) && !element.parentNode.classList.contains(‘e-treeview’)) { element = element.parentNode; let id: string = 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) } } }); treeObj.appendTo(“#tree”); |
|
Check all nodes |
Method: checkAll $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.checkAll(); |
Method: checkAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true }); treeObj.appendTo(“#tree”); treeObj.checkAll(); |
||
Check node |
Method: checkNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.checkNode($(“#book”)); |
Method: checkAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true }); treeObj.appendTo(“#tree”); treeObj.checkAll([“book”]); |
||
Set checkednodes |
Property: checkedNodes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true, checkedNodes: [2, 8, 12] }); |
Property: checkedNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true, checkedNodes: [“3”, “9”, “13”] }); treeObj.appendTo(“#tree”); |
||
Get checked nodes |
Method: getCheckedNodes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getCheckedNodes(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let check: string[]=treeObj.getAllCheckedNodes(); let i: number=0; let checkedNodes: Element[]; while(i<check.length) { checkedNodes.push(treeObj.element.querySelector(‘[data-uid=”’ + checkedNodes[i] + ‘”]’)); i++ } console.log(checkedNodes) |
||
Get checked nodes index |
Method: getCheckedNodesIndex $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getCheckedNodesIndex(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true }); treeObj.appendTo(“#tree”); let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’) let nodeIndex: number[]; 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 $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isNodeChecked($(“book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true }); treeObj.appendTo(“#tree”); if (treeObj.getNode("book")['isChecked'] === true) { console.log("Node is checked") }
|
||
Triggers when node is checked successfully |
Event: nodeCheck $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckBox: true, nodeCheck: function() {} }); |
Event: nodeChecked let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true, nodeChecked: function(args) { if (args.action == “check”) {} } }); treeObj.appendTo(“#tree”); |
||
Checkbox support |
Property: showCheckbox $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); |
Property: showCheckBox let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true }); treeObj.appendTo(“#tree”); |
||
To uncheck all nodes |
Method: unCheckAll $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.unCheckAll(); |
Method: uncheckAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true }); treeObj.appendTo(“#tree”); treeObj.uncheckAll(); |
||
To uncheck node |
Method: uncheckNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckbox: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.uncheckNode($(“#book”)); |
Method: uncheckAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true }); treeObj.appendTo(“#tree”); treeObj.uncheckAll([“book”]); |
||
Triggers when node is unchecked successfully |
Event: nodeUncheck $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, showCheckBox: true, nodeUncheck: function() {} }); |
Event: nodeChecked let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true, nodeChecked: function(args) { if (args.action == “un-check”) {} } }); treeObj.appendTo(“#tree”); |
||
Triggers before nodes are checked/ unchecked | Not Applicable |
Event: nodeChecking let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, showCheckBox: true, nodeChecking: function(args) { if (args.action == “check”) {} } }); treeObj.appendTo(“#tree”); |
Drag and Drop
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Drag and drop |
Property: allowDragAndDrop $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true }); |
Property: allowDragAndDrop let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowDragAndDrop: true }); treeObj.appendTo(“#tree”); |
Prevent Drag and drop to another Treeview |
Property: allowDragAndDropAcrossControl $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true, allowDragAndDropAcrossControl: false }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowDragAndDrop: true, nodeDragStop: function(args) { if (args.draggedParentNode.closest(‘.e-treeview’) !== args.dropTarget.closest(‘.e-treeview’)) { args.cancel = true; }} }); treeObj.appendTo(“#tree”); |
Prevent sibling drop |
Property: allowDropSibling $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true, allowDropSibling: false }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeDragStop: function(args) { if(args.dropIndicator === “e-drop-next”) { args.cancel = true; } }); treeObj.appendTo(“#tree”); |
Prevent child drop |
Property: allowDropChild $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true, allowDropChild: false }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeDragStop: function(args) { if(args.dropIndicator === “e-drop-in”) { args.cancel = true; } }); treeObj.appendTo(“#tree”); |
Triggers when node is dragged |
Event: nodeDrag $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true, nodeDrag: function() {} }); |
Event: nodeDragging let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowDragAndDrop: true, nodeDragging: function() {} }); treeObj.appendTo(“#tree”); |
Triggers when node drag is started successfully |
Event: nodeDragStart $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true, nodeDragStart: function() {} }); |
Event: nodeDragStart let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowDragAndDrop: true, nodeDragStart: function() {} }); treeObj.appendTo(“#tree”); |
Triggers before dragged node drag is stopped |
Event: nodeDragStop $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true, nodeDragStop: function() {} }); |
Event: nodeDragStop let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowDragAndDrop: true, nodeDragStop: function() {} }); treeObj.appendTo(“#tree”); |
Triggers when node is dropped successfully |
Event: nodeDropped $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowDragAndDrop: true, nodeDropped: function() {} }); |
Event: nodeDropped let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowDragAndDrop: true, nodeDropped: function() {} }); treeObj.appendTo(“#tree”); |
Expand/Collapse nodes
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Triggers before node is collapsed |
Event: beforeCollapse $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforeCollapse: function() {} }); |
Event: nodeCollapsing let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeCollapsing: function() {} }); treeObj.appendTo(“#tree”); |
Triggers before node is expanded |
Event: beforeExpand $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforeExpand: function() {} }); |
Event: nodeExpanding let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeExpanding: function() {} }); treeObj.appendTo(“#tree”); |
Collapse all nodes |
Method: collapseAll $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.collapseAll(); |
Method: collapseAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.collapseAll(); |
Collapse Node |
Method: collapseNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.collapseNode($(“#1”)); |
Method: collapseAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.collapseAll([“1”]); |
Prevent multiple nodes expand |
Property: enableMultipleExpand $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, enableMultipleExpand: false }); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeExpanding: function(args) { let parent: Element=args.node.parentNode.closest(‘.e-list-item’); if (parent === null) parent=args.node.parentNode.closest(‘.e-treeview’); let children: Element[]=parent.querySelectorAll(‘.e-list-item’); let i:number=0; let nodes:string=[]; while(i<children.length){ nodes.push(children[i].getAttribute(“data-uid”)); i++;} this.collapseAll(nodes) } }); treeObj.appendTo(“#tree”); |
Expand all Nodes |
Method: expandAll $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.expandAll(); |
Method: expandAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.expandAll(); |
Expand Node |
Method: expandNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.expandNode($(“1”)); |
Method: expandAll let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.expandAll([“1”]); |
Gets/Sets Expanded nodes |
Property: expandedNodes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, expandedNodes: [1, 2] }); |
Property: expandedNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, expandedNodes: [“1”, “2”] }); treeObj.appendTo(“#tree”); |
Expand action |
Property: expandOn $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, expandOn: “click” }); |
Property: expandOn let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, expandOn: “Click” }); treeObj.appendTo(“#tree”); |
Get expanded nodes |
Method: getExpandedNodes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getExpandedNodes(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let expand: string[]=treeObj.expandedNodes; let i: number=0; let expandedNodes: Element[]; while(i<expand.length) { expandedNodes.push(treeObj.element.querySelector(‘[data-uid=”’ + expandednodes[i] + ‘”]’)); i++ } console.log(expandedNodes) |
Get expanded nodes index |
Method: getExpandedNodesIndex $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getExpandedNodesIndex(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowMultiSelection: true }); treeObj.appendTo(“#tree”); let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’) let nodeIndex: number; let i:number = 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 $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isExpanded($(“book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); if(treeObj.expandedNodes.indexOf(“book”) !== -1) { console.log(“Node is expanded”) } |
Triggers when node is collapsed successfully |
Event: nodeCollapse $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeCollapse: function() {} }); |
Event: nodeCollapsed let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeCollapsed: function() {} }); treeObj.appendTo(“#tree”); |
Triggers when node is expanded successfully |
Event: nodeExpand $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeExpand: function() {} }); |
Event: nodeExpanded let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeExpanded: function() {} }); treeObj.appendTo(“#tree”); |
Node Editing
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Editing |
Property: allowEditing $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowEditing: true }); |
Property: allowEditing let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowEditing: true }); treeObj.appendTo(“#tree”); |
Triggers before node is edited |
Event: beforeEdit $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowEditing: true, beforeEdit: function() {} }); |
Event: nodeEditing let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowEditing: true, nodeEditing: function() {} }); treeObj.appendTo(“#tree”); |
To Enable editing programatically | Not Applicable |
Method: beginEdit let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, }); treeObj.appendTo(“#tree”); treeObj.beginEdit(“1”); |
Triggers before node edit is successful |
Event: inlineEditValidation $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowEditing: true, inlineEditValidation: function() {} }); |
Event: nodeEdited let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowEditing: true, nodeEdited: function() {} }); treeObj.appendTo(“#tree”); |
Triggers when node is edited successfully |
Event: nodeEdit $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowEditing: true, nodeEdit: function() {} }); |
Event: dataSourceChanged let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, dataSourceChanged: function() {} }); treeObj.appendTo(“#tree”); |
Node Selection
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Multi-selection |
Property: allowMultiSelection $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowMultiSelection: true }); |
Property: allowMultiSelection let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowMultiSelection: true }); treeObj.appendTo(“#tree”); |
Triggers before node is selected |
Event: beforeSelect $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, beforeSelect: function() {} }); |
Event: nodeSelecting let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeSelecting: function() {} }); treeObj.appendTo(“#tree”); |
Fullrowselection |
Property: fullRowSelect $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, fullRowSelect: true }); |
Property: fullRowSelect let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, fullRowSelect: true }); treeObj.appendTo(“#tree”); |
Get selected node |
Method: getSelectedNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNode(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let select: string[]=treeObj.selectedNodes; let selectedNode: Element[]; selectedNode.push(treeObj.element.querySelector(‘[data-uid=”’ + selectedNode[i] + ‘”]’)); console.log(selectedNode) |
Get selected node index |
Method: getSelectedNodeIndex $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNodeIndex(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’) let nodeIndex: number; let i:number = 0; while(i<nodes.length) { if(nodes[i].classList.contains(‘e-active’)) {nodeIndex = i; break; } i++ } console.log(nodeIndex) |
Get selected nodes |
Method: getSelectedNodes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowMultiSelection: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNodes(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); let select: string[]=treeObj.selectedNodes; let i: number=0; let selectedNodes: Element[]; while(i<select.length) { selectedNodes.push(treeObj.element.querySelector(‘[data-uid=”’ + selectedNodes[i] + ‘”]’)); i++ } console.log(selectedNodes) |
Get selected nodes index |
Method: getSelectedNodesIndex $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowMultiSelection: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNodesIndex(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowMultiSelection: true }); treeObj.appendTo(“#tree”); let nodes: Element[]=treeObj.element.querySelectorAll(‘.e-list-item’) let nodeIndex: number; let i:number = 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 $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isSelected($(“book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); if (treeObj.selectedNodes.indexOf(“book”) !== -1) { console.log(“Node is selected”) } |
Triggers when node is selected successfully |
Event: nodeSelect $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeSelect: function() {} }); |
Event: nodeSelected let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeSelected: function(args) { if (args.action ==”select”) {} } }); treeObj.appendTo(“#tree”); |
Select all nodes |
Method: selectAll $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowMultiSelection: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.selectAll(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowMultiSelection: true }); treeObj.appendTo(“#tree”); var nodes = treeObj.element.querySelectorAll(‘.e-list-item’) var selectednodes; for(int i = 0; i < nodes.length; i++) { selectednodes.push(nodes[i].getAttribute(‘data-uid’))} treeObj.selectedNodes = selectednodes; |
Gets/Sets selected node |
Property: selectedNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, selectedNode: 1 }); |
Property: selectedNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, selectedNodes: [“1”] }); treeObj.appendTo(“#tree”); |
Select node |
Method: selectNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”} }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.selectNode($[“#book”]); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”} }); treeObj.appendTo(“#tree”); treeObj.selectedNodes=[“book”] |
Gets/Sets selected nodes |
Property: selectedNodes $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, selectedNodes: [1, 2], allowMultiSelection: true }); |
Property: selectedNodes let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, selectedNodes: [“1”, “2”], allowMultiSelection: true }); treeObj.appendTo(“#tree”); |
Triggers when node is unselected successfully |
Event: nodeUnselect $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, nodeUnselect: function() {} }); |
Event: nodeSelected let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeSelected: function(args) { if (args.action ==”un-select”) {} } }); treeObj.appendTo(“#tree”); |
To unselect all nodes |
Method: unselectAll $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowMultiSelection: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.unselectAll(); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowMultiSelection: true }); treeObj.appendTo(“#tree”); treeObj.selectedNodes=[]; |
To unselect node |
Method: unselectNode $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, allowMultiSelection: true }); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.unselectNode($(“#book”)); |
Can be achieved using, let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, allowMultiSelection: true }); treeObj.appendTo(“#tree”); let selectedNodes: string=treeObj.selectedNodes.pop(book); |
Template
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Custom template |
Property: template $(“#tree”).ejTreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChild: “hasChild”}, template: “#templateData”, }); |
Property: nodeTemplate let treeObj: TreeView = new TreeView({ fields: {dataSource: treeData, id: “id”, parentId: “pid”, text: “name”, hasChildren: “hasChild”}, nodeTemplate: “#templateData “, }); treeObj.appendTo(“#tree”); |