Pan the Diagram with the Mouse Wheel
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 pan the Kendo UI Diagram when scrolling with the mouse?
Solution
To achieve this behavior:
- Handle the
zoomStartevent of the Kendo UI Diagram. - Get the delta from the arguments, that is
e.meta.delta. - Pan the Diagram with the new coordinates by using the
panmethod.
<select id="panDirection">
<option value="x">Pan Horizontally</option>
<option value="y">Pan Vertically</option>
</select>
<div id="diagram"></div>
<script>
var Point = kendo.dataviz.diagram.Point;
$("#diagram").kendoDiagram({
shapes:[ { id:"1", x: 100, y: 100 },
{ id:"2", x: 300, y: 100 } ],
connections:[ { from: "1", to: "2" }
],
zoomStart: function(e){
var zoomDirection = $("#panDirection").val();
var diagram = e.sender,
panPoint = diagram.pan();
panPoint[zoomDirection] = panPoint[zoomDirection] + e.meta.delta;
diagram.pan(panPoint);
e.preventDefault();
},
});
</script>