Show Context Menu over Diagram Shapes
Environment
| Product | Progress® Kendo UI® Diagram for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I show a Kendo UI ContextMenu when pressing the right button of the mouse over the Diagram shapes?
Solution
To achieve this behavior:
- Initialize a Kendo UI ContextMenu setting its target as the ID of the Diagram and filter it by a
gelement. - Handle the
openevent of the ContextMenu. If the target is a connection, it is possible to cancel the event. If the target is a shape, it is possible to store thedataItemin a variable. - Handle the
selectevent of the ContextMenu where you can perform a custom action based on the context of the shape.
<ul id="menu">
<li>
Reply
<ul>
<li> Reply to Sender</li>
<li>Reply to All</li>
</ul>
</li>
<li class="k-separator"></li>
<li>Forward</li>
</ul>
<div id="diagram"></div>
<script>
var data = [{
firsLastName : "Antonio Moreno",
title : "Team Lead",
colorScheme : "#1696d3",
items : [{
firsLastName : "Elizabeth Brown",
title : "Design Lead",
colorScheme : "#ef6944"
}, {
firsLastName : "Felipe Izquiedro",
title : "Senior Developer",
colorScheme : "#75be16"
}
]
}
];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width : 210,
height : 75,
stroke : {
width : 0
},
fill : {
gradient : {
type : "linear",
stops : [{
color : dataItem.colorScheme,
offset : 0,
opacity : 0.5
}, {
color : dataItem.colorScheme,
offset : 1,
opacity : 1
}
]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text : dataItem.firsLastName,
x : 55,
y : 20,
fill : "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text : dataItem.title,
x : 55,
y : 40,
fill : "#fff"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource : new kendo.data.HierarchicalDataSource({
data : data,
schema : {
model : {
children : "items"
}
}
}),
layout : {
type : "layered"
},
shapeDefaults : {
visual : visualTemplate
},
connectionDefaults : {
stroke : {
color : "#979797",
width : 2
}
}
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
var contextDataItem;
$("#menu").kendoContextMenu({
target : "#diagram",
filter : "g",
open : function (e) {
if (e.event) {
try {
var shapes = diagram.shapes;
var connections = diagram.connections;
var point = diagram.documentToModel(new kendo.dataviz.diagram.Point(e.event.pageX, e.event.pageY));
//Cancel the menu opening when the target is a connection
for (var i = connections.length - 1; i >= 0; i--) {
if (connections[i].bounds().contains(point)) {
e.preventDefault();
}
}
//Find the target shape
for (var i = shapes.length - 1; i >= 0; i--) {
if (shapes[i].bounds().contains(point)) {
contextDataItem = shapes[i].dataItem;
break;
}
}
} catch (e) {
alert(e);
}
}
},
select : function (e) {
var itemText = $(e.item).text();
alert(kendo.format("{0}: {1}", itemText, contextDataItem.firsLastName));
}
});
}
$(document).ready(createDiagram);
</script>