We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TreeView ContextMenu. Get TreeNode value on TreeView while click ContextMenu

Hi,

I am using ContextMenu component on my TreeView component, I want to add child for node using ContextMenu, I don't now how I can get the current id of  node on TreeView while I right click to add a child for it's node.

I using TreeView for Angular 7x

I try:

HTML:
<ejs-treeview id="treeMaterial" #treeMaterial [fields]="treeFields" [allowDragAndDrop]="true" (nodeExpanding)="nodeExpanding($event)" [loadOnDemand]="true"</ejs-treeview>

<ejs-contextmenu id='contextmenu' #contextmenu target='#treeMaterial' (beforeOpen)='beforeOpen($event)' [items]='menuItems'></ejs-contextmenu>`

TS:
I using beforeOpen
public beforeOpen(args: BeforeOpenCloseMenuEventArgs) {

        var node = $(args.event.target).closest("e-list-item e-level-3 e-active e-node-focus");

        ////???
    }


Thank so much !!!

3 Replies

CI Christopher Issac Sunder K Syncfusion Team January 14, 2019 01:25 PM UTC

Hi Tin, 

Thank you for contacting Syncfusion support. 

In our TreeView component, we have selectedNodes property which stores the id of the selected tree nodes. You can use this property in the contextMenu beforeOpen event, to get the id of the tree node which was clicked using the below code, 
  
[HTML] 
<ejs-treeview id="treeMaterial" #treeMaterial [fields]="treeFields" [allowDragAndDrop]="true" (nodeExpanding)="nodeExpanding($event)" [loadOnDemand]="true"</ejs-treeview> 
<ejs-contextmenu id='contextmenu' #contextmenu target='#treeMaterial' (beforeOpen)='beforeOpen($event)' [items]='menuItems'></ejs-contextmenu> 
  
[TS] 
@ViewChild ('treeMaterial') treeView: TreeViewComponent; 
public beforeOpen(args: BeforeOpenCloseMenuEventArgs) { 
let treeId: string = this.treeView.selectedNodes[0]; 
We have prepared a sample for your reference.  

We have documented on how to add, remove and rename nodes using contextMenu in TreeView in our help site - https://ej2.syncfusion.com/angular/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/ .  

Let us know if you have any more concerns. 

Thanks, 
Christo 



SS Sathyanarayanan Srinivasan November 6, 2019 07:52 PM UTC

Hi,

I have the same need and I have tried to follow the documentation and the sample ou had posted herewith. I am using "@syncfusion/ej2-angular-navigations": "^17.3.26" in my angular project. The code this.tvInstance.selectedNodes[0]   alwas return undefined. I had checked the same in your sample (https://stackblitz.com/edit/angular-qkxbqj-tq2pex?file=default.component.ts) and it is returning undefined as well. Can ou please help if I am missing anything or the component has changed something in the latest release.

Thanks and best regards,
Sathya


KR Keerthana Rajendran Syncfusion Team November 7, 2019 10:03 AM UTC

Hi Sathyanarayanan, 
 
Sorry for the inconvenience.  
 
We have checked your reported query that selectednodes[0] always return undefined. We tried all possible cases but unfortunately unable to reproduce this in our end. We have attached a sample and video for your reference.  
 
 
Also, we have tried to find out the possible case for this issue. The selectedNodes returns element properly.  If still you are facing the same problem, you can use the below suggested solution in your application to overcome this issue. Also, kindly share the issue reproducible procedure or sample which will be more helpful to identify and resolve this issue earlier.  
 
You have to set target for context menu as a closest of LI elements rather than selectedNodes. Refer to the below code snippet. 
 
  public beforeopen(args: BeforeOpenCloseMenuEventArgs) { 
    if (args.event.target.closest("li")) { 
      this.targetNode = args.event.target.closest("li"); 
    } 
  } 
 
For your reference, we have prepared a sample. Refer the sample link below. 
 
 
Please let us know, if you have any concerns. 
 
Regards, 
Keerthana 
 


Loader.
Live Chat Icon For mobile
Up arrow icon