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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Context Menu show on right click of the node

Thread ID:

Created:

Updated:

Platform:

Replies:

151250 Feb 5,2020 07:03 AM UTC Jul 13,2020 12:40 PM UTC Angular 11
loading
Tags: ejDiagram
RakhiS
Asked On February 5, 2020 07:03 AM UTC

Hi,
If I want to show  contextmenu on the node which shows only at the time of right clicking a node, And in that I want to give customize options
let say,
1.Red
2.Blue
3.Green
On this suppose I click on Red then it should show a syncfusion popup which contains a form to add details, in the same way for the other two as well.

How to achieve this, Please do the needful
Thanks in advance.


Shyam G [Syncfusion]
Replied On February 6, 2020 12:20 PM UTC

Hi Rakhi, 
 
We have created a sample in which we have shown custom context menu on right click of a node. When you click on a menu items, contextMenuClick event gets triggered. In this event, we have opened a popup and shown the textbox. You can edit the value in the textbox and submit it using button.  
 
Code example: 
//contextmenuclick event 
  public contextMenuClick(args: MenuEventArgs): void { 
    //open a dialog 
     this.dialog.show();  
  } 
 
//submit a data in the popup 
  public buttonClick(args: Object): void { 
    //get an textbox value 
   let data = this.textareaObj.nativeElement.value; 
  }; 
 
 
 
Regards, 
Shyam G 


RakhiS
Replied On March 4, 2020 07:16 AM UTC

Hi, Thanks.
I tried the same, but this context menu is opening on clicking on outside the node as well. I want only to show this when a user right click on any node. 
2. Is it possible to get the id of node on which I am right clicking to open the context menu?
3. Also my context-menu is not opening at the first time, second time it is working. 
Reason:I am in need of single click event also and both the (right click and select event ) events are colliding. 
When I select any node and right click it is working, but when I do directly right click it is not working.

Please help!!!

Shyam G [Syncfusion]
Replied On March 5, 2020 11:57 AM UTC

Hi Rakhi, 

Query 
Response 
I tried the same, but this context menu is opening on clicking on outside the node as well. I want only to show this when a user right click on any node. 
Please use contextMenuOpen event to hide the context Menu items at right click on the diagram. Please refer to a code example and the sample below. 

Code example: 
    public contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs): void { 
       //to get a node 
      let selectedNode:NodeModel = this.diagram.selectedItems.nodes[0]; 
      //to get a connector 
      let selectedConnector:ConnectorModel = this.diagram.selectedItems.connectors[0];  
      if(!(selectedNode || selectedConnector)) { 
        //cancel a event if it is a diagram. 
        args.cancel=true; 
     
   
 
Is it possible to get the id of node on which I am right clicking to open the context menu? 

Yes, you can use selectedItems nodes/connectors property to get a selected node/connector object. Please refer to a code example below. 

Code example: 
   //to get a node 
      let selectedNode:NodeModel = this.diagram.selectedItems.nodes[0]; 
      //to get a connector 
      let selectedConnector:ConnectorModel = this.diagram.selectedItems.connectors[0];  
 
Also my context-menu is not opening at the first time, second time it is working.  
Reason:I am in need of single click event also and both the (right click and select event ) events are colliding.  
When I select any node and right click it is working, but when I do directly right click it is not working. 
We could not able to replicate an issue at our end. Could you please check in the below sample. Still if you face issues, please share us more details such as modify the below sample. 


Regards, 
Shyam G 


RakhiS
Replied On March 31, 2020 08:46 AM UTC

Hi, I am able to get the id of the node on which it is right clicking, can I get the label as well? I tried with the same approch as u suggest for the id but I am getting error.

Shyam G [Syncfusion]
Replied On April 1, 2020 03:46 AM UTC

Hi Rakhi, 

We have modified a sample in which we have shown how to get a annotation object by right clicking on the node/connector element. Please refer to a code example and the sample below. 

Code example: 
  public contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs): void {  
       //to get a node 
      let selectedNode:NodeModel = this.diagram.selectedItems.nodes[0]; 
      //to get a connector 
      let selectedConnector:ConnectorModel = this.diagram.selectedItems.connectors[0];  
      if(selectedNode && selectedNode.annotations && selectedNode.annotations.length > 0) { 
        //get a node annotation object 
          let label = selectedNode.annotations[0]; 
      } 
 
      if(selectedConnector && selectedConnector.annotations && selectedConnector.annotations.length > 0) { 
        //get a connector annotation object 
         let label = selectedConnector.annotations[0]; 
      } 
  
   


Regards, 
Shyam G 


RakhiS
Replied On April 1, 2020 05:01 AM UTC

Thanks, worked for me in the same I used label.content.

Aravind Ravi [Syncfusion]
Replied On April 1, 2020 11:20 AM UTC

Hi Rakhi, 
 
Thanks for the update. 
 
Regards 
Aravind Ravi 


Alfred Williams
Replied On April 9, 2020 07:29 AM UTC

void treeView1MouseUp(object sender, MouseEventArgs e)
{
    if(e.Button == MouseButtons.Right)
    {
        // Select the clicked node
        treeView1.SelectedNode = treeView1.GetNodeAt(e.X, e.Y);

        if(treeView1.SelectedNode != null)
        {
            myContextMenuStrip.Show(treeView1, e.Location);
        }
    }
}

Naganathan Ganesh Babu [Syncfusion]
Replied On April 10, 2020 08:05 AM UTC

Hi Alfred, 
 
We are unable to understand your query with the provided code snippet. Please share more details about your requirement to analyze further. 
 
Regards, 
Naganathan K G 


Alfred Williams
Replied On July 11, 2020 04:28 AM UTC

void treeView1MouseUp(object sender, MouseEventArgs e)
{
    if(e.Button == MouseButtons.Right)
    {
        // Select the clicked node
        treeView1.SelectedNode = treeView1.GetNodeAt(e.X, e.Y);

        if(treeView1.SelectedNode != null)
        {
            myContextMenuStrip.Show(treeView1, e.Location);
        }
    }
}

void treeView1MouseUp(object sender, MouseEventArgs e)
{
    if(e.Button == MouseButtons.Right) VidMate app TeaTV Apk Shareit for PC    {
        // Select the clicked node
        treeView1.SelectedNode = treeView1.GetNodeAt(e.X, e.Y);

        if(treeView1.SelectedNode != null)
        {
            myContextMenuStrip.Show(treeView1, e.Location);
        }
    }
}
This ain't working that's i had to mention

Aravind Ravi [Syncfusion]
Replied On July 13, 2020 12:40 PM UTC

Hi Rakhi, 

We are unable to reproduce the issue i.e. context menu do not gets open on right click at our end. So could you please share us a simple sample replicating issue or modify the below sample illustrating issue. This will help us to proceed further. 


Regards 
Aravind Ravi 


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

Live Chat Icon For mobile
Live Chat Icon