In graphical user interface (GUI), a context menu is a type of menu that appears when you perform right-click operation. Nested level of context menu items can be created.
Diagram provides some in-built context menu items and allows to define custom menu items through the contextMenuSettings property.
The show property helps you to enable/disable the context menu. Diagram provides some default context menu items to ease the execution of some frequently used commands.
The following code illustrates how to enable the default context menu items.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
<e-diagram-contextmenusettings show="true"></e-diagram-contextmenusettings>
</ejs-diagram>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 } });
ViewBag.connectors = Connectors;
return View();
}
}
}Context menu can be defined for individual node with the desired context menu items.
items property of the context menu.text and ID properties respectively.iconCss property defines the class/multiple classes separated by a space for the menu item that is used to include an icon. Menu item can include font icon and sprite image.target property used to set the target to show the menu item.separator property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the separator property.The following code example illustrates how to add custom context menu items.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
<e-diagram-contextmenusettings show="true" showCustomMenuOnly="false" items="@ViewBag.item" ></e-diagram-contextmenusettings>
</ejs-diagram>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController: Controller
{
// GET: Node
public ActionResult Node()
{
// Sets the Annotation for the Node
List<DiagramNode> Nodes = new List<DiagramNode>();
List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
Node1.Add(new DiagramNodeAnnotation()
{
//Sets the offset for the content
Content = "Node1",
Hyperlink = new { link = "" },
Style = new DiagramTextStyle()
{
Color = "black",
Fill = "transparent"
},
//Sets the margin for the annotation
Margin = new DiagramMargin() { Top = 10 },
// Sets the horizontal alignment as left
HorizontalAlignment = Syncfusion.EJ2.Diagrams.HorizontalAlignment.Left,
// Sets the vertical alignment as Center
VerticalAlignment = Syncfusion.EJ2.Diagrams.VerticalAlignment.Center
});
List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
Node2.Add(new DiagramNodeAnnotation()
{
//Sets the offset for the content
Content = "Node1",
Style = new DiagramTextStyle()
{
Color = "black",
Fill = "transparent"
},
//Sets the margin for the annotation
Margin = new DiagramMargin() { Bottom = 10 },
// Sets the horizontal alignment as left
HorizontalAlignment = Syncfusion.EJ2.Diagrams.HorizontalAlignment.Left,
// Sets the vertical alignment as Center
VerticalAlignment = Syncfusion.EJ2.Diagrams.VerticalAlignment.Center
});
Nodes.Add(new DefaultNode()
{
Id = "Node1",
OffsetY = 100,
OffsetX = 100,
Height = 100,
Width = 100,
// add the Annotation for the Node
Annotations = Node1,
});
Nodes.Add(new DefaultNode()
{
Id = "Node2",
OffsetY = 100,
OffsetX = 100,
Height = 100,
Width = 100,
// add the Annotation for the Node
Annotations = Node2,
}); // Sets the Annotation for the Connector
List<DiagramConnectorAnnotation> Connector1 = new List<DiagramConnectorAnnotation>();
Connector1.Add(new DiagramConnectorAnnotation()
{
Content = "Connector1",
// Sets the offset for the content
Offset = 0,
//Sets the margin for the annotation
Margin = new DiagramMargin() { Top = 10 },
Style = new DiagramTextStyle() { Color = "white", Fill = "transparent" }
});
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector()
{
Id = "connector1",
SourceID = "Node1",
TargetID = "Node2",
// add the Annotation for the Connector
Annotations = Connector1
});
ViewBag.nodes = Nodes;
ViewBag.connectors = Connectors;
List<contextMenuItems> item = new List<contextMenuItems>();
item.Add(new contextMenuItems()
{
Id = "save",
Text = "Save",
Target = ".e-elementcontent",
IconCss = "e-save"
});
item.Add(new contextMenuItems()
{
Id = "load",
Text = "Load",
Target = ".e-elementcontent",
IconCss = "e-load"
}); item.Add(new contextMenuItems()
{
Id = "clear",
Text = "Clear",
Target = ".e-elementcontent",
IconCss = "e-clear"
});
ViewBag.item = item;
return View();
}
}
public class contextMenuItems
{
[DefaultValue(null)]
[HtmlAttributeName("text")]
[JsonProperty("text")]
public string Text
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("id")]
[JsonProperty("id")]
public string Id
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("target")]
[JsonProperty("target")]
public string Target
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("iconCss")]
[JsonProperty("iconCss")]
public string IconCss
{
get;
set;
}
}
}To display the custom context menu items alone, set the showCustomMenuOnly property to true.
contextMenuBeforeItemRender event. The contextMenuBeforeItemRender event triggers while rendering each menu item.contextMenuBeforeItemRender event.<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
<e-diagram-contextmenusettings show="true" showCustomMenuOnly="false" ></e-diagram-contextmenusettings>
</ejs-diagram>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 } });
ViewBag.connectors = Connectors;
return View();
}
}
}You would be notified with events, when you try to open the context menu items contextMenuOpen and when you click the menu items contextMenuClick.
The following code example illustrates how to define those events.
<ejs-diagram id="container" width="100%" height="700px" connectors="@ViewBag.connectors" nodes="@ViewBag.nodes">
<e-diagram-contextmenusettings show="true" showCustomMenuOnly="false" ></e-diagram-contextmenusettings>
</ejs-diagram>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List < DiagramNodeAnnotation > Node2 = new List < DiagramNodeAnnotation > ();
Node2.Add(new DiagramNodeAnnotation() {
Content = "node2", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
nodes.Add(new DiagramNode() {
Id = "node2",
Width = 100,
Height = 100,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
OffsetX = 300,
OffsetY = 300,
Annotations = Node2
});
ViewBag.nodes = nodes;
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector() { Id = "connector", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 300, Y = 300 } });
ViewBag.connectors = Connectors;
return View();
}
}
}function contextMenuOpen() {
for (var item of args.items) {
if (item.text === 'delete') {
var diagram = document.getElementById("container").ej2_instances[0];
if (!diagram.selectedItems.nodes.length && !diagram.selectedItems.connectors.length) {
args.hiddenItems.push(item.text);
}
}
}
}
function contextMenuClick() {
if (args.item.id === 'delete') {
var diagram = document.getElementById("container").ej2_instances[0];
if ((diagram.selectedItems.nodes.length + diagram.selectedItems.connectors.length) > 0) {
diagram.cut();
}
}
}