TreeView ContextMenu. Get TreeNode value on TreeView while click ContextMenu

[Tin]

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]

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.  

Sample - https://stackblitz.com/edit/angular-qkxbqj-tq2pex?file=default.component.ts  

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]

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]

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.  

 

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/treeview_component1577449901.zip 

 

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. 

 

https://codesandbox.io/s/angular-7-bootstrap-4-3skus 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana