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

Connect

methods

Creates a connection which can be either attached on both ends to a shape, half attached or floating (not attached to any shape). When a connection is (half) attached to a shape it happens through the intermediate Connector object. Connectors are part of a Shape's definition and you can specify the binding of a connection to a shape directly via the shape or via one of its connectors. If you specify a Shape as a connection's endpoint the Auto-connector will be used. This means that the endpoint of the connection will switch to the most convenient (in the sense of shortest path) connector automatically. If you specify a shape's connector as an endpoint for a connection the endpoint will remain attached to that given Connector instance. Finally, if you wish to have a (half) floating connection endpoint you should specify a Point as parameter for the floating end.

Kendo UI for jQuery Diagram Creating connections.

connect

Parameters:sourceObject

The source definition of the connection. This can be a Shape, a Connector or a Point.

targetObject

The target definition of the connection. This can be a Shape, a Connector or a Point.

optionsObject

The options of the new connection. See connections options.

<div id="diagram"></div>

<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();

  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape(new Shape({x:100, y:100, fill: "red"}));
  var shape2 = diagram.addShape(new Shape({x:400, y:1000, fill: "red"}));
  var connection = diagram.connect(shape1, shape2)

</script>

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();

  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape(new Shape({x:100, y:100, fill: "red"}));
  var shape2 = diagram.addShape(new Shape({x:400, y:100, fill: "red"}));

  var connection = diagram.connect(shape1.getConnector("top"), shape2.getConnector("bottom"));

</script>

<div id="diagram"></div>

<script>
  var Shape = kendo.dataviz.diagram.Shape;
  var Point = kendo.dataviz.diagram.Point;
  $("#diagram").kendoDiagram();

  var diagram = $("#diagram").data("kendoDiagram");
  var shape = diagram.addShape(new Shape({x:100, y:100, fill: "red"}));

  var connection = diagram.connect(new Point(250,350), shape)
</script>

Note that the Shape holds an indexed connectors collection. Instead of accessing a default or custom connector by means of the getConnector("name-of-connector") method you could use connectors[index] instead.