Zoom on Ctrl Keypress Only
The following example demonstrates how to set up the Diagram to allow zooming in and out only when the Ctrl key is pressed.
<div style="overflow:auto; width: 1000px; height: 300px;">
<div id="diagram"></div>
</div>
<script>
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: diagramNodes()
}),
layout: {
type: "tree",
horizontalSeparation: 30,
verticalSeparation: 20
},
shapeDefaults: {
width: 40,
height: 40
},
zoomStart: function(ev) {
if (!ev.meta.ctrlKey) {
ev.preventDefault(true);
}
}
});
function diagramNodes() {
var root = { name: "0", items: [] };
addNodes(root, [3, 3, 3, 3]);
return [root];
}
function addNodes(root, levels) {
if (levels.length > 0) {
for (var i = 0; i < levels[0]; i++) {
var node = { name: "0", items: [] };
root.items.push(node);
addNodes(node, levels.slice(1));
}
}
}
</script>