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

Source

methods

Gets or sets the current source 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.

source

Parameters:sourcekendo.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.

Returns:Object

the connection source.

<button id="changeSourceBtn">Change Connection Source</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: 100, y: 100 }));
  var shape2 = diagram.addShape( new Shape({ x: 300, y: 180 }));
  var shape3 = diagram.addShape( new Shape({ x: 300, y: 20 }));

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

  diagram.addConnection(connection);

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