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:

1. Handle the zoomStart event of the Kendo UI Diagram.
2. Get the delta from the arguments, that is e.meta.delta.
3. Pan the Diagram with the new coordinates by using the pan method.

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

See Also

• Basic Usage of the Diagram (Demo)
• JavaScript API Reference of the Diagram
• Implement Local Data Editing
• Render External Content in Shapes
• Wrap Text