Programmatically showing the ContextMenu (when user handle clicked)

Hello -

I have created this example where when you left click the User Handle in the lower left of a node, the context menu should appear.

https://stackblitz.com/edit/stackblitz-starters-dk6kpw?file=src%2Fscripts%2Fevents.ts

If I step through the code in the debugger it works, but if otherwise it does not. Am I doing something wrong?


Image_9645_1717705238722


5 Replies

VG Vivisa Ganesan Syncfusion Team June 7, 2024 09:22 AM UTC

Hi,

We have created a sample as per your requirements, where the context menu is rendered upon clicking the user handle using the `onUserHandleMouseDown` event. Refer to the sample below.


Sample:

https://stackblitz.com/edit/angular-8nww6f-7fnryt?file=src%2Fapp.component.html,src%2Fapp.component.ts


Regards,

Vivisa



KA Kabe June 7, 2024 06:15 PM UTC

Hello and thank you for this. It helped me to figure out some things.

However one big issue I have is that I am currently using the diagram context menu events (see screenshot below) and this is the context menu I need to open (and not the separate contextmenu like in the stackblitz).

For example, I have a lot of logic built into the contextMenuOpen event.


Image_8554_1717783821307


Here's what I am trying currently to open this meny...I believe it should work but it is not:

        var userhandle = document.getElementById(
          args.element.name + '_userhandle'
        );
        var bounds = userhandle.getBoundingClientRect();

        const contextMenu = (this.selectedItem.diagram.contextMenuModule as any)
          .contextMenu;
        if (contextMenu) {
          contextMenu.open(bounds.ybounds.x);
        }


https://stackblitz.com/edit/stackblitz-starters-dk6kpw?file=src%2Fscripts%2Fevents.ts



VG Vivisa Ganesan Syncfusion Team June 10, 2024 06:21 AM UTC

Hi,

In the diagram context menu, the default behavior is to render upon a right-click. If you want to customize the opening of the context menu, it is not possible to use the diagram's context menu for this purpose. Instead, you should use the Syncfusion context menu. We have already shared a sample demonstrating how to open the context menu by clicking the user handle. Please refer to that sample for implementation details.



Regards,

Vivisa



KA Kabe June 10, 2024 01:56 PM UTC

I see - you're saying I should just use the separate context menu for everything. 

Ok - I will look into that...I thought it might create additional problems elsewhere because the diagram contextmenu has DiagramBeforeMenuOpenEventArgs and I won't have this in the seperate context menu. I was concerned that I would be missing something useful but I guess I should be okay if I can do the equivalent there.



MG Moulidharan Gopalakrishnan Syncfusion Team June 11, 2024 01:01 PM UTC

Hi,


The Syncfusion context menu also has events that you can bind to. Refer to the following user guide to learn more about the context menu component.

UG: https://ej2.syncfusion.com/angular/documentation/context-menu/getting-started

 

 

Regards,

 Moulidharan




Loader.
Up arrow icon