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: addNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.addNode("Node", "#book"); |
Method: addNodes<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; var object = [{ id: "temp", name: "New node" }, { id: "new", name: "New node 1" }]; tree.addNodes(object, "book"); |
Triggers before adding node | Event: beforeAddReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeAdd: this.beforeAdd}); beforeAdd: function(){} |
Not Applicable |
Adding node after a particular node | Method: insertAfterReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.insertAfter("node", "book"); |
Can be achieved using<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; var object = [{ id: "1", name: "node" }], var child = tree.element.querySelector('[data-uid="book"]'); var parent = child.parentElement.closest('.e-list-item'); var level = parseInt(parent.getAttribute('aria-level'))+1; var childNodes = Array.from(parent.querySelectorAll('.e-list-item.e-level-'+level)) var index = childNodes.indexOf(child) tree.addNodes(object, "book", index+1); |
Adding node before a particular node | Method: insertBeforeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.insertBefore("node", "book"); |
Can be achieved using<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; var object = [{ id: "1", name: "node" }], var child = tree.element.querySelector('[data-uid="book"]'); var parent = child.parentElement.closest('.e-list-item'); var level = parseInt(parent.getAttribute('aria-level'))+1; var childNodes = Array.from(parent.querySelectorAll('.e-list-item.e-level-'+level)) var index = childNodes.indexOf(child) tree.addNodes(object, "book", index-1); |
Triggers when node is added successfully | Event: nodeAddReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeAdd: this.nodeAdd}); nodeAdd: function(){} |
Event: dataSourceChanged<TreeViewComponent fields={this.field} dataSourceChanged={this.dataSourceChanged.bind(this)}/> dataSourceChanged(): void {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Keyboard Navigation | Property: allowKeyboardNavigationReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowKeyboardNavigation: false}); |
Can be achieved using,<TreeViewComponent fields={this.field} keyPress={this.keyPress.bind(this)}/> Script keyPress(args): void { args.cancel = true; } |
Triggers before node is cut | Event: beforeCutReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeCut: this.beforeCut}); beforeCut: function(){} |
Not Applicable |
Triggers before node is deleted | Event: beforeDeleteReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeDelete: this.beforeDelete}); beforeDelete: function(){} |
Not Applicable |
Triggers before loading nodes | Event: beforeLoadReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeLoad: this.beforeLoad}); beforeLoad: function(){} |
Not Applicable |
Triggers before node is pasted | Event: beforePasteReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforePaste: this.beforePaste}); beforePaste: function(){} |
Not Applicable |
Triggers when Treeview is created | Event: createReact.createElement(EJ.TreeView, {id: "tree", fields: fields, create: this.onCreate}); onCreate: function(){} |
Event: created<TreeViewComponent fields={this.field} created={this.onCreated.bind(this)}/> onCreated(): void {} |
Css class | Property: cssClassReact.createElement(EJ.TreeView, {id: "tree", fields: fields, cssClass: "custom"}); |
Property: cssClass<TreeViewComponent fields={this.field} cssClass={'custom'}/> |
Triggers when Treeview is destroyed | Event: destroyReact.createElement(EJ.TreeView, {id: "tree", fields: fields, destroy: this.onDestroy}); onDestroy: function(){} |
Event: destroyed<TreeViewComponent fields={this.field} destroyed={this.onDestroyed.bind(this)}/> onDestroyed(): void {} |
Destroy Treeview control | Method: destroyReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.destroy(); |
Method: destroy<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.destroy(); |
Disable Node | Method: disableNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.disableNode("1"); |
Method: disableNodes<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.disableNodes(["1", "2"]); |
Enable Animation | Property: enableAnimationReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enableAnimation: false}); |
Property: animation<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.animation.expand.duration=0 tree.animation.collapse.duration=0 |
Control state | Property: enabledReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enabled: false}); |
Not Applicable |
Enable Node | Method: enableNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.enableNode("1"); |
Method: enableNodes<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.enableNodes(["1", "2"]); |
Persistence | Property: enablePersistenceReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enablePersistence: true}); |
Property: enablePersistence<TreeViewComponent enablePersistence={true} fields={this.field}/> |
Right to Left | Property: enableRTLReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enableRTL: true}); |
Property: enableRtl<TreeViewComponent enableRtl={true} fields={this.field}/> |
Ensure visibility | Method: ensureVisibleReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.ensureVisible("1"); |
Method: ensureVisible<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.ensureVisible("1"); |
Mapping fields | Property: fieldsReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var fields = { id: "id",text: "text",parentId: "parent",dataSource: this.localData,isChecked: "checked",selected: "selected",spriteCssClass: "spriteImage",imageUrl: "imageUrl",htmlAttribute: "nodeProperty",linkAttribute: "linkProperty",imageAttribute: "imageProperty" } |
Property: fields<TreeViewComponent fields={this.field}/> public field: Object = { dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', expanded: 'expanded', htmlAttribute: 'htmlAttributes', imageAttribute: 'img', imageUrl: 'imageUrl', isChecked: 'checked', linkAttribute: 'linkAttribute', query: null, selected: 'selected', spriteCssClass: 'custom', tableName: null }; |
Get child nodes | Method: getChildrenReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getChildren("1"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var parent=tree.element.querySelector('[data-uid="1"]')<br/>console.log(parent.querySelector('.e-list-item')) |
Get node | Method: getNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNode("1"); |
Method: getNode<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.getNode("1"); |
Get node by index | Method: getNodeByIndexReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNodeByIndex(3); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var nodes=tree.element.querySelectorAll('.e-list-item') console.log(nodes[3]); |
Get node count | Method: getNodeCountReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNodeCount(); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var nodes=tree.element.querySelectorAll('.e-list-item') console.log("Node count is " + nodes.length); |
Get node index | Method: getNodeIndexReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getNodeIndex("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var nodes=tree.element.querySelectorAll('.e-list-item') var node = tree.element.querySelector('[data-uid="' + "book" + '"]'); while(i<nodes.length) { if(nodes[i] === node) {console.log("Node index is "+i) break; } i++ } |
Get parent of node | Method: getParentReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getParent("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var child=tree.element.querySelector('[data-uid="' + "book" + '"]'); var parent = child.parentNode.closest('.e-list-item') console.log(parent) |
Get tree node text | Method: getTextReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getText("1"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var nodeText =tree.getNode("1")['text'] console.log(nodeText) |
Get updated datasource | Method: getTreeDataReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getTreeData(); |
Method: getTreeData<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.getTreeData(); |
Get visible nodes | Method: getVisibleNodesReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getVisibleNodes(); |
Not Applicable |
Height of Treeview control | Property: heightReact.createElement(EJ.TreeView, {id: "tree", fields: fields, height: "400px"}); |
Can be achieved using, <TreeViewComponent fields={this.field} cssClass={'custom'}/> Css .e-treeview.custom{ height: 400px; } |
Checking for child nodes | Method: hasChildNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.hasChildNode("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var parent=tree.element.querySelector('[data-uid="book"]') if (parent.querySelector('.e-list-item') !== null) { console.log("Has child node") } |
Hide all nodes | Method: hideReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.hide(); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.element.querySelector('.e-list-parent').style.display="none" |
Hide node | Method: hideNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.hideNode("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.element.querySelector('[data-uid="book"]').style.display="none" |
HTML Attributes | Property: htmlAttributesReact.createElement(EJ.TreeView, {id: "tree", fields: fields, htmlAttributes: htmlAttr}); var htmlAttr = {name: "treeview"}; } |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.element.classList.add("htmlAttr") |
To check if child nodes are loaded | Method: isChildLoadedReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isChildLoaded("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var parent=tree.element.querySelector('[data-uid="book"]') if (parent.querySelector('.e-list-item') !== null) { console.log("Child is loaded") } |
To check if node is disabled | Method: isDisabledReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isDisabled("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var node=tree.element.querySelector('[data-uid="book"]') if (node.classList.contains('e-disable') === true) { console.log("Node is disabled") } |
To check if node exists in Treeview | Method: isExistReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isExist("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; if (tree.getNode('book')['text']) !== "") { console.log("Node exists") } |
To check if node is visible | Method: isVisibleReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isVisible("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; if (tree.element.querySelector('[data-uid="book"]').style.display !== "none"){ console.log("Node is visible") } |
Triggers on key press | Event: keyPressReact.createElement(EJ.TreeView, {id: "tree", fields: fields, keyPress: this.onKeyPress}); onKeyPress: function(){} |
Event: keyPress<TreeViewComponent fields={this.field} keyPress={this.onKeyPress.bind(this)}/> onKeyPress(): void {} |
Load Treeview nodes from particular URl | Method: loadDataReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.loadData("childData", "book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var dataManager = new DataManager { Url = "/FileContent/rootNode", Adaptor = "UrlAdaptor", CrossDomain = true}; dataManager.executeQuery(new ej.data.Query().take(8).then((e) => { var childData = e.result; tree.addNodes(childData, "book") })); |
Triggers when data load fails | Event: loadErrorReact.createElement(EJ.TreeView, {id: "tree", fields: fields, loadError: this.loadError}); loadError: function(){} |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var dataManager = new DataManager { Url = "/FileContent/rootNode", Adaptor = "UrlAdaptor", CrossDomain = true}; dataManager.executeQuery(new ej.data.Query().take(8).error((e) => { console.log('Data load failed') })); |
Load on demand | Property: loadOnDemandReact.createElement(EJ.TreeView, {id: "tree", fields: fields, loadOnDemand: true}); |
Property: loadOnDemand<TreeViewComponent fields={this.field} loadOnDemand={false}> Treeview is rendered in load on demand by default |
Triggers when data load is success | Event: loadSuccessReact.createElement(EJ.TreeView, {id: "tree", fields: fields, loadSuccess: this.loadSuccess}); loadSuccess: function(){} var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.loadData("childData", "book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var dataManager = new DataManager { Url = "/FileContent/rootNode", Adaptor = "UrlAdaptor", CrossDomain = true}; dataManager.executeQuery(new ej.data.Query().take(8).then((e) => { console.log('Data loaded successfully') })); |
To move node | Method: moveNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.moveNode("book", "art"); |
Method: moveNodes<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.moveNodes(["book"], "art"); |
Triggers when node is clicked successfully | Event: nodeClickReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeClick: this.nodeClick}); nodeClick: function(){} |
Event: nodeClicked<TreeViewComponent fields={this.field} nodeClicked={this.onNodeClicked.bind(this)}/> onNodeClicked(): void {} |
Triggers when node is cut successfully | Event: nodeCutReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeCut: this.nodeCut}); nodeCut: function(){} |
Not Applicable |
Triggers when node is deleted successfully | Event: nodeDeleteReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeDelete: this.nodeDelete}); nodeDelete: function(){} |
Event: dataSourceChanged<TreeViewComponent fields={this.field} dataSourceChanged={this.dataSourceChanged.bind(this)}/> dataSourceChanged(): void {} |
Triggers when node is pasted successfully | Event: nodePasteReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodePaste: this.nodePaste}); nodePaste: function(){} |
Not Applicable |
Triggers when nodes are loaded successfully | Event: readyReact.createElement(EJ.TreeView, {id: "tree", fields: fields, ready: this.onReady}); onReady: function(){} |
Event: dataBound<TreeViewComponent fields={this.field} dataBound={this.dataBound.bind(this)}/> dataBound(): void {} |
Refresh Treeview control | Method: refreshReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.refresh(); |
Not Applicable |
To show all nodes | Method: showReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.show(); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.element.querySelector('.e-list-parent').style.display="block" |
Show node | Method: showNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.showNode("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.element.querySelector('[data-uid="book"]').style.display="block" |
Remove all Treeview nodes | Method: removeAllReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.removeAll(); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.removeNodes([treeObj.element.querySelector('.e-list-parent')]) |
Remove Treeview node | Method: removeNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.removeNode("book"); |
Method: removeNodes<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.removeNodes("book"); |
Sort order | Property: sortSettingsReact.createElement(EJ.TreeView, {id: "tree", fields: fields, sortSettings: sortSettings}); var sortSettings = { allowSorting: true, sortOrder: "Descending" } |
Property: sortOrder<TreeViewComponent sortOrder={'Descending'} fields={this.field}/> |
Update node text | Method: updateTextReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.updateText("book", "text"); |
Method: updateNode<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; tree.updateNode("book", "text"); |
Width of Treeview control | Property: widthReact.createElement(EJ.TreeView, {id: "tree", fields: fields, width: "300px"}); |
Can be achieved using, <TreeViewComponent cssClass={'custom'} fields={this.field}/> Css .e-treeview.custom{ width: 300px; } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Prevent auto-check of child and parent | Property: autoCheckReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, autoCheck: false}); |
Property: autoCheck<TreeViewComponent fields={this.field} autoCheck={false} showCheckBox={true}/> |
Prevent indeterminate state in parent node | Property: autoCheckParentNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, autoCheckParentNode: false}); |
Can be achieved using,<TreeViewComponent fields={this.field} autoCheck={false} nodeChecked={this.nodeChecked.bind(this) showCheckBox={true}/> public tree: TreeViewComponent; nodeChecked(args): void { var child = tree.element.querySelector('[data-uid="' + args.data[0]['id'] + '"]'); var checkNodes = []; var element = child.parentNode; while ((element !== null || element !== undefined) && !element.parentNode.classList.contains('e-treeview')) { element = element.parentNode; var id = element.getAttribute('data-uid'); if (id !== null) checkNodes.push(element.getAttribute('data-uid')) } if (child.querySelector('.e-list-item') !== null && args.isInteracted === true && args.action === 'check') { tree.autoCheck = true; tree.checkAll(child.getAttribute('data-uid')); } else if (child.querySelector('.e-list-item') !== null && args.isInteracted === true && args.action === 'uncheck') { tree.autoCheck = true; tree.uncheckAll(child.getAttribute('data-uid')); } tree.autoCheck = false; if (args.action === 'check') { tree.checkAll(checkNodes) } else if (args.action === 'uncheck' && child.parentNode.querySelector('.e-check') === null) { tree.uncheckAll(checkNodes) } } |
Check all nodes | Method: checkAllReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.checkAll(); |
Method: checkAll<TreeViewComponent fields={this.field} showCheckBox={true}/> public tree: TreeViewComponent; tree.checkAll(); |
Check node | Method: checkNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.checkNode("book"); |
Method: checkAll<TreeViewComponent fields={this.field} showCheckBox={true}/> public tree: TreeViewComponent; tree.checkAll("book"); |
Set checkednodes | Property: checkedNodesReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, checkedNodes: ['2', '8', '12']}); |
Property: checkedNodes<TreeViewComponent fields={this.field} checkedNodes={'3', '9', '13'} showCheckBox={true}/> |
Get checked nodes | Method: getCheckedNodesReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getCheckedNodes(); |
Can be achieved using,<TreeViewComponent fields={this.field} showCheckBox={true}/> public tree: TreeViewComponent; var check=tree.getAllCheckedNodes(); var i=0; var checkedNodes; while(i<check.length) { checkedNodes.push(treeObj.element.querySelector('[data-uid="' + checkedNodes[i] + '"]')); i++ } console.log(checkedNodes) |
Get checked nodes index | Method: getCheckedNodesIndexReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getCheckedNodesIndex(); |
Can be achieved using,<TreeViewComponent fields={this.field} showCheckBox={true}/> public tree: TreeViewComponent; var nodes=tree.element.querySelectorAll('.e-list-item') var nodeIndex; while(i<nodes.length) { if(nodes[i].classList.contains('e-check')) {nodeIndex.push(i); } i++ } console.log(nodeIndex) |
To check if nodes are checked | Method: isNodeCheckedReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isNodeChecked("book"); |
Can be achieved using,<TreeViewComponent fields={this.field} showCheckBox={true}/> public tree: TreeViewComponent; if (tree.getNode("book")['isChecked'] === true) { console.log("Node is checked") } |
Triggers when node is checked successfully | Event: nodeCheckReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, nodeCheck: this.nodeCheck}); nodeCheck: function(){} |
Event: nodeChecked<TreeViewComponent fields={this.field} showCheckBox={true} nodeChecked={this.nodeChecked.bind(this)}/> nodeChecked(args): void { if (args.action == "check") {} } |
Checkbox support | Property: showCheckboxReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); |
Property: showCheckBox<TreeViewComponent fields={this.field} showCheckBox={true}/> |
To uncheck all nodes | Method: unCheckAllReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.unCheckAll(); |
Method: uncheckAll<TreeViewComponent fields={this.field} showCheckBox={true}/> public tree: TreeViewComponent; tree.uncheckAll(); |
To uncheck node | Method: uncheckNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.uncheckNode("book"); |
Method: uncheckAll<TreeViewComponent fields={this.field} showCheckBox={true}/> public tree: TreeViewComponent; tree.uncheckAll(["book"]); |
Triggers when node is unchecked successfully | Event: nodeUncheckReact.createElement(EJ.TreeView, {id: "tree", fields: fields, showCheckbox: true, nodeUncheck: this.nodeUncheck}); nodeUncheck: function(){} |
Event: nodeChecked<TreeViewComponent fields={this.field} showCheckBox={true} nodeChecked={this.nodeChecked.bind(this)}/> nodeChecked(args): void { if (args.action == "un-check") {} } |
Triggers before nodes are checked/ unchecked | Not Applicable | Event: nodeChecking<TreeViewComponent fields={this.field} showCheckBox={true} nodeChecking={this.nodeChecking.bind(this)}/> nodeChecking(): void { if (args.action == "check") {} } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Drag and drop | Property: allowDragAndDropReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true}); |
Property: allowDragAndDrop<TreeViewComponent fields={this.field} allowDragAndDrop={true} /> |
Prevent Drag and drop to another Treeview | Property: allowDragAndDropAcrossControlReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, allowDragAndDropAcrossControl:true}); |
Can be achieved using, <TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/> nodeDragStop(args): void { if (args.draggedParentNode.closest('.e-treeview') !== args.dropTarget.closest('.e-treeview')) { args.cancel = true; }} |
Prevent sibling drop | Property: allowDropSiblingReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, allowDropSibling:false}); |
Can be achieved using,<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/> nodeDragStop(args): void { if(args.dropIndicator === "e-drop-next") { args.cancel = true; }} |
Prevent child drop | Property: allowDropChildReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, allowDropChild:false}); |
Can be achieved using,<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/> nodeDragStop(args): void { if(args.dropIndicator === "e-drop-in") { args.cancel = true; }} |
Triggers when node is dragged | Event: nodeDragReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDrag: this.nodeDrag}); nodeDrag: function(){} |
Event: nodeDragging<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragging={this.nodeDragging.bind(this)}/> nodeDragging(): void {} |
Triggers when node drag is started successfully | Event: nodeDragStartReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDragStart: this.nodeDragStart}); nodeDragStart: function(){} |
Event: nodeDragStart<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStart={this.nodeDragStart.bind(this)}/> nodeDragStart(): void {} |
Triggers before dragged node drag is stopped | Event: nodeDragStopReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDragStop: this.nodeDragStop}); nodeDragStop: function(){} |
Event: nodeDragStop<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDragStop={this.nodeDragStop.bind(this)}/> nodeDragStop(): void {} |
Triggers when node is dropped successfully | Event: nodeDroppedReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowDragAndDrop: true, nodeDropped: this.nodeDropped}); nodeDropped: function(){} |
Event: nodeDropped<TreeViewComponent fields={this.field} allowDragAndDrop={true} nodeDropped={this.nodeDropped.bind(this)}/> nodeDropped(): void {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Triggers before node is collapsed | Event: beforeCollapseReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeCollapse: this.beforeCollapse}); beforeCollapse: function(){} |
Event: nodeCollapsing<TreeViewComponent fields={this.field} nodeCollapsing={this.nodeCollapsing.bind(this)}/> nodeCollapsing(): void {} |
Triggers before node is expanded | Event: beforeExpandReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeExpand: this.beforeExpand}); beforeExpand: function(){} |
Event: nodeExpanding<TreeViewComponent fields={this.field} nodeExpanding={this.nodeExpanding.bind(this)}/> nodeExpanding(): void {} |
Collapse all nodes | Method: collapseAllReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.collapseAll(); |
Method: collapseAll<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; tree.collapseAll(); |
Collapse Node | Method: collapseNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.collapseNode("1"); |
Method: collapseAll<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; tree.collapseAll(["1"]); |
Prevent multiple nodes expand | Property: enableMultipleExpandReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true}); |
Can be achieved using,<TreeViewComponent fields={this.field} nodeExpanding={this.nodeExpanding.bind(this)}/> nodeExpanding(args): void { var parent=args.node.parentNode.closest('.e-list-item'); if (parent === null) parent=args.node.parentNode.closest('.e-treeview'); var children=parent.querySelectorAll('.e-list-item'); var i=0; var nodes=[]; while(i<children.length){<br/>nodes.push(children[i].getAttribute("data-uid")); i++;} this.collapseAll(nodes) } |
Expand all Nodes | Method: expandAllReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.expandAll(); |
Method: expandAll<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; tree.expandAll(); |
Expand Node | Method: expandNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.expandNode("1"); |
Method: expandAll<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; tree.expandAll(["1"]); |
Gets/Sets Expanded nodes | Property: expandedNodesReact.createElement(EJ.TreeView, {id: "tree", fields: fields, expandedNodes: ['1', '2']}); |
Property: expandedNodes<TreeViewComponent fields={this.field} expandedNodes={this.expandedNodes}/> public expandedNodes: string[] = ['1', '2']; |
Expand action | Property: expandOnReact.createElement(EJ.TreeView, {id: "tree", fields: fields, expandOn: 'Click'}); |
Property: expandOn<TreeViewComponent fields={this.field} expandOn={'Click'}/> |
Get expanded nodes | Method: getExpandedNodesReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getExpandedNodes(); |
Can be achieved using,<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; var expand=tree.expandedNodes; var i=0; var expandedNodes; while(i<expand.length) { expandedNodes.push(treeObj.element.querySelector('[data-uid="' + expandednodes[i] + '"]')); i++ } console.log(expandedNodes) |
Get expanded nodes index | Method: getExpandedNodesIndexReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getExpandedNodesIndex(); |
Not Applicable |
To check if node is expanded | Method: isExpandedReact.createElement(EJ.TreeView, {id: "tree", fields: fields, enableMultipleExpand: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isExpanded("book"); |
Can be achieved using,<TreeViewComponent fields={this.field} /> public tree: TreeViewComponent; if(tree.expandedNodes.indexOf("book") !== -1) { console.log("Node is expanded") } |
Triggers when node is collapsed successfully | Event: nodeCollapseReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeCollapse: this.nodeCollapse}); nodeCollapse: function(){} |
Event: nodeCollapsed<TreeViewComponent fields={this.field} nodeCollapsed={this.nodeCollapsed.bind(this)}/> nodeCollapsed(): void {} |
Triggers when node is expanded successfully | Event: nodeExpandReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeExpand: this.nodeExpand}); nodeExpand: function(){} |
Event: nodeExpanded<TreeViewComponent fields={this.field} nodeExpanded={this.nodeExpanded.bind(this)}/> nodeExpanded(): void {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Editing | Property: allowEditingReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowEditing: true}); |
Property: allowEditing<TreeViewComponent fields={this.field} allowEditing={true}/> |
Triggers before node is edited | Event: beforeEditReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeEdit: this.beforeEdit, allowEditing: true}); beforeEdit: function(){} |
Event: nodeEditing<TreeViewComponent fields={this.field} allowEditing={true} nodeEditing={this.nodeEditing.bind(this)}/> nodeEditing(): void {} |
To Enable editing programatically | Not Applicable | Method: beginEdit<TreeViewComponent fields={this.field} allowEditing={true}/> public tree: TreeViewComponent; tree.beginEdit("1"); |
Triggers before node edit is successful | Event: inlineEditValidationReact.createElement(EJ.TreeView, {id: "tree", fields: fields, inlineEditValidation: this.inlineEditValidation, allowEditing: true}); inlineEditValidation: function(){} |
Event: nodeEdited<TreeViewComponent fields={this.field} allowEditing={true} nodeEdited={this.nodeEdited.bind(this)}/> nodeEdited(): void {} |
Triggers when node is edited successfully | Event: nodeEditReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeEdit: this.nodeEdit, allowEditing: true}); nodeEdit: function(){} |
Event: dataSourceChanged Event: dataSourceChanged <TreeViewComponent fields={this.field} allowEditing={true} dataSourceChanged={this.dataSourceChanged.bind(this)}/> dataSourceChanged(): void {} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Multi-selection | Property: allowMultiSelectionReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true}); |
Property: allowMultiSelection<TreeViewComponent fields={this.field} allowMultiSelection={true}/> |
Triggers before node is selected | Event: beforeSelectReact.createElement(EJ.TreeView, {id: "tree", fields: fields, beforeSelect: this.beforeSelect}); beforeSelect: function(){} |
Event: nodeSelecting<TreeViewComponent fields={this.field} nodeSelecting={this.nodeSelecting.bind(this)}/> nodeSelecting(): void {} |
Fullrowselection | Property: fullRowSelectReact.createElement(EJ.TreeView, {id: "tree", fields: fields, fullRowSelect: true}); |
Property: fullRowSelect<TreeViewComponent fields={this.field} fullRowSelect={true}/> |
Get selected node | Method: getSelectedNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNode(); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var select=tree.selectedNodes; var selectedNode; selectedNode.push(tree.element.querySelector('[data-uid="' + selectedNode[i] + '"]')); console.log(selectedNode) |
Get selected node index | Method: getSelectedNodeIndexReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNodeIndex(); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; var nodes=tree.element.querySelectorAll('.e-list-item') var nodeIndex; var i = 0; while(i<nodes.length) { if(nodes[i].classList.contains('e-active')) {nodeIndex = i; break; } i++ } console.log(nodeIndex) |
Get selected nodes | Method: getSelectedNodesReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNodes(); |
Can be achieved using,<TreeViewComponent fields={this.field} allowMultiSelection={true}/> public tree: TreeViewComponent; var select=tree.selectedNodes; var i=0; var selectedNodes; while(i<select.length) { selectedNodes.push(treeObj.element.querySelector('[data-uid="' + selectedNodes[i] + '"]')); i++ } console.log(selectedNodes) |
Get selected nodes index | Method: getSelectedNodesIndexReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.getSelectedNodesIndex(); |
Can be achieved using,<TreeViewComponent fields={this.field} allowMultiSelection={true}/> public tree: TreeViewComponent; var nodes=tree.element.querySelectorAll('.e-list-item') var nodeIndex; var i = 0; while(i<nodes.length) { if(nodes[i].classList.contains('e-active')) {nodeIndex.push(i); } i++ } console.log(nodeIndex) |
To check if node is selected | Method: isSelectedReact.createElement(EJ.TreeView, {id: "tree", fields: fields}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.isSelected("book"); |
Can be achieved using,<TreeViewComponent fields={this.field}/> public tree: TreeViewComponent; if (tree.selectedNodes.indexOf("book") !== -1) { console.log("Node is selected") } |
Triggers when node is selected successfully | Event: nodeSelectReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeSelect: this.nodeSelect}); nodeSelect: function(){} |
Event: nodeSelected<TreeViewComponent fields={this.field} nodeSelected={this.nodeSelected.bind(this)}/> nodeSelected(args): void { if (args.action =="select") {} } |
Select all nodes | Method: selectAllReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.selectAll(); |
Can be achieved using,<TreeViewComponent fields={this.field} allowMultiSelection={true}/> public tree: TreeViewComponent; var nodes = tree.element.querySelectorAll('.e-list-item') var selectednodes; for(int i = 0; i < nodes.length; i++) { selectednodes.push(nodes[i].getAttribute('data-uid'))} tree.selectedNodes = selectednodes; |
Gets/Sets selected node | Property: selectedNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields, selectedNode: ['1']}); |
Property: selectedNodes<TreeViewComponent fields={this.field} selectedNodes={this.selectedNode}/> public selectedNode: string[] = ['1']; |
Select node | Method: selectNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.selectNode(["book"]); |
Can be achieved using,<TreeViewComponent fields={this.field} allowMultiSelection={true}/> public tree: TreeViewComponent; tree.selectedNodes=["book"] |
Gets/Sets selected nodes | Property: selectedNodesReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true, selectedNodes: ['1', '2']}); |
Property: selectedNodes<TreeViewComponent fields={this.field} allowMultiSelection={true} selectedNodes={this.selectedNode}/> public selectedNodes: string[] = ['1', '2']; |
Triggers when node is unselected successfully | Event: nodeUnselectReact.createElement(EJ.TreeView, {id: "tree", fields: fields, nodeUnselect: this.nodeUnselect}); nodeUnselect: function(){} |
Event: nodeSelected<TreeViewComponent fields={this.field} nodeSelected={this.nodeSelected.bind(this)}/> nodeSelected(args): void { if (args.action =="un-select") {} } |
To unselect all nodes | Method: unselectAllReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.unselectAll(); |
Can be achieved using,<TreeViewComponent fields={this.field} allowMultiSelection={true}/> public tree: TreeViewComponent; tree.selectedNodes=[]; |
To unselect node | Method: unselectNodeReact.createElement(EJ.TreeView, {id: "tree", fields: fields, allowMultiSelection: true}); var treeObj = $(“#tree”).data(“ejTreeView”); treeObj.unselectNode("book"); |
Can be achieved using,<TreeViewComponent fields={this.field} allowMultiSelection={true}/> public tree: TreeViewComponent; var selectedNodes=tree.selectedNodes.pop(book) |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Custom template | Property: templateReact.createElement(EJ.TreeView, {id: "tree", fields: fields, template: templateData}); |
Property: nodeTemplate<TreeViewComponent fields={this.field} nodeTemplate={this.templateData}/> |