Edit this page

Pan with Mouse Wheel

The following example demonstrates how to pan the Kendo UI Diagram when scrolling with the mouse.

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.

Example

<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

For more runnable examples on the Kendo UI Diagram, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy