target

Gets or set the target of the Connection.

This object can be a Point for a floating endpoint (i.e. not attached to a shape), a Shape or a Connector of a Shape. You can use the Shape.getConnector() method to fetch a Connector on the basis of its name. If a Shape is specified the Connection will attach to the "Auto" connector.

Parameters

target kendo.dataviz.diagram.Shape|kendo.dataviz.diagram.Point|kendo.dataviz.diagram.Connector
  • Point: any Point on the canvas. This creates an unattached floating endpoint.
  • Shape: will bind the endpoint to the"Auto" Connector which will switch between the other connectors to minimize the length of the connection.
  • Connector: the connection's endpoint will remain fixed attached to the specified Connector.

If no source is specified the method will return the current object to which the Connection's endpoint is attached.

Example - configuring the target

<button id="changeTargetBtn">Change Connection Target</button>
<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: 120, y: 180 }));
  var shape2 = diagram.addShape( new Shape({ x: 120, y: 30 }));
  var shape3 = diagram.addShape( new Shape({ x: 120, y: 330 }));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    type: "cascading",
    selectable: false
  });

  diagram.addConnection(connection);

  $("#changeTargetBtn").on("click", function(){
    var connection = diagram.connections[0];
    connection.target(shape3.getConnector("right"));
  });
</script>

Returns

Object the connection target.

In this article