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. Image for the cookie policy date

Context Menu show on right click of the node

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.


11 Replies

SG Shyam G Syncfusion Team 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 



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


SG Shyam G Syncfusion Team 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 



RA RakhiS 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.


SG Shyam G Syncfusion Team 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 



RA RakhiS April 1, 2020 05:01 AM UTC

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


AR Aravind Ravi Syncfusion Team April 1, 2020 11:20 AM UTC

Hi Rakhi, 
 
Thanks for the update. 
 
Regards 
Aravind Ravi 



AW Alfred Williams 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);
        }
    }
}


NG Naganathan Ganesh Babu Syncfusion Team 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 



AW Alfred Williams replied to Alfred Williams 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


AR Aravind Ravi Syncfusion Team 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 


Loader.
Up arrow icon