Context Menu show on right click of the node

[RakhiS]

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]

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; 

  }; 

 

 

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

 

Regards, 

Shyam G 

[RakhiS]

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]

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.

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

Regards, 

Shyam G 

[RakhiS]

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]

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]; 

      } 

  

    } 

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

Regards, 

Shyam G 

[RakhiS]

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

[Aravind Ravi]

Hi Rakhi, 

 

Thanks for the update. 

 

Regards 

Aravind Ravi 

[Alfred Williams]

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]

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]

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]

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. 

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

Regards 

Aravind Ravi