New to Kendo UI for jQuery? Start a free 30-day trial

Pan

methods

Pans the diagram with a specified delta (represented as a Point).

If called without parameters, the method returns the current pan offset of the diagram.

pan

Parameters:panObject|kendo.dataviz.diagram.Point

The translation delta to apply to the diagram or the Point to pan to.

Object — The current pan offset in the format: { x: Number, y: Number }

<button id="panBtn">Pan Diagram</button>
<div id="diagram"></div>
<script>
  $("#panBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    var point = new kendo.dataviz.diagram.Point(120, 120);
    diagram.pan(point);
  });
  $("#diagram").kendoDiagram({
    zoom: 1.5,
    shapes: [{
      id: "1",
      x: 100,
      y: 20
    }, {
      id: "2",
      x: 350,
      y: 20
    }, {
      id: "3",
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

var diagram = $("#diagram").data("kendoDiagram");

// Move diagram 50px to the right var currentOffset = diagram.pan();

diagram.pan({ x: currentOffset.x + 50, y: currentOffset.y });

The pan() method sets an absolute offset. To move the Diagram relatively (for example, when handling keyboard navigation), first retrieve the current offset by calling pan() without arguments, then apply the desired delta and set the new offset.