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

Connections.from

configuration

Defines the source of the connection. You can set this property to a value matching a shape id or to an object with XY-coordinates.

connections.from

Object|String|Number

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 300,
      y: 20
    }],
    connections: [
      {
        from: {
          x: 20,
          y: 70
        },
        to: "1",
        startCap: "FilledCircle"
      },
      {
        from: "1",
        to: "2",
        endCap: "ArrowEnd"
      }]
  });
</script>

connections.from.x

Number

Defines the x-coordinate of the connection source.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
      { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
      { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
      from: { x: 100, y: 100 },
      to: { x: 300, y: 100 }
    }]
});
</script>

connections.from.y

Number

Defines the y-coordinate of the connection source.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
      { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
      { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
      from: { x: 100, y: 100 },
      to: { x: 300, y: 150 }
    }]
});
</script>