Ej1 api migration in React Treeview component
30 Jan 202324 minutes to read
This article describes the API migration process of TreeView component from Essential JS 1 to Essential JS 2.
Add nodes
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Add node |
Method: 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 {}
|
Common
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; } |
CheckBox
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") {} }
|
Drag and Drop
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 {}
|
Expand/Collapse nodes
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 {}
|
Node Editing
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 {}
|
Node Selection
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)
|
Template
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}/>
|