Select Fired After BeforeOpen ContextMenu

[frederik]

I used the how-to for a context menu in a tree view:

https://ej2.syncfusion.com/angular/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/

The problem I am facing is that the select event is fired after the context menu beforeopen one, so that I get null on the first call, and the previously selected node on subsequent right-clicks.

Am I missing something obvious?

Many thanks

My code 

<ejs-treeview #filesTree id='filesTree' [fields]='field' (nodeDragStop)="onDragStopped($event)" (nodeDragging)="onDragging($event)" (nodeSelected)='nodeSelected($event)'

[allowEditing]='canChange' (nodeEdited)='onNodeEdited($event)'

(nodeDropped)="onNodeDropped($event)" allowMultiSelection=false allowDragAndDrop=true></ejs-treeview>

<!-- -->

</div>

<ejs-contextmenu #fileContextMenu id='fileContextMenu' target='#filesTree' [items]='menuItems' (select)='menuclick($event)' (beforeOpen)='beforeopen($event)' ></ejs-contextmenu>

[Narayanasamy Panneer Selvam]

Hi Frederik, 

 

Greetings from Syncfusion support. 

 

We have validated your query and have prepared a sample based on the reported scenario. But we could not able to reproduce your issue at our end.  

Demo sample: https://stackblitz.com/edit/angular-siaux6-s9nwtu?file=app.component.ts 

Video reference: Output 

If the sample takes more time to load, then please run it in an incognito window. 

If still the reported issue is persisting at your end, Kindly modify the shared sample to reproduce the reported issue. It will be more helpful to assist you better. 

 

Regards, 

Narayanasamy P. 

[frederik]

The issue might be with self-referential data. I've edited the sample to reproduce the error.

https://stackblitz.com/edit/angular-siaux6-rhcitn

The first right-click will show 'undefined' selected item. Clicking outside of the tree and then right-click again will keep on showing undefined. Selecting one, and then and then right-clicking another will show the id of the previously selected one.

Many thanks

[Ashokkumar Balasubramanian]

Hi Frederik, 

 

We have checked the reported issue and it was due to in some cases the beforeOpen event gets triggered even before the SelectedNode value gets initialized. So, you can use the following code snippet to get the target tree node in the beforeOpen event of the context menu. 

 

if ((args.event.target as any).closest('li')) { 

        this.targetNodeId = (args.event.target as any).closest('li').getAttribute("data-uid"); 

    } 

 

Sample: https://stackblitz.com/edit/angular-siaux6-uqhghh?file=app.component.ts 

 

Please check the above sample and get back to us if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[frederik]

Thank you - this should do the trick

[Ashokkumar Balasubramanian]

Hi Frederik, 

 

Most Welcome. 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.