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

Type

methods

Gets or sets the (sub-) type of the Connection which defines the way it routes.

The routing of a connection is the way that intermediate points of a Connection defines a route. A route is usually defined on the basis of constraints or behaviors. Currently the framework defines a default polyline route (which simply connects the given intermediate points) and a simple rectangular (aka cascading) route. The cascading type is useful when using tree layout and hierarchies; the routed Connection will in this case enhance the representation of the hierarchy and thus reproduce a classic organization diagram.

type

<button id="changeTypeBtn">Change Connection Type</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 connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    selectable: false
  });

  diagram.addConnection(connection);

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