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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeView ContextMenu. Get TreeNode value on TreeView while click ContextMenu

Thread ID:

Created:

Updated:

Platform:

Replies:

141939 Jan 11,2019 08:48 AM UTC Nov 7,2019 10:03 AM UTC Angular - EJ 2 3
loading
Tags: Treeview
Tin
Asked On January 11, 2019 08:48 AM UTC

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 !!!

Christopher Issac Sunder K [Syncfusion]
Replied On 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 


Sathyanarayanan Srinivasan
Replied On 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

Keerthana Rajendran [Syncfusion]
Replied On 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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;