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

EndCap

configuration

The connection end cap configuration or type name.

endCap

String|Object

<div id="diagram"></div>
<script>
  var Point = kendo.dataviz.diagram.Point;
  var diagram = $("#diagram").kendoDiagram({ }).getKendoDiagram();
  var connection = diagram.connect(new Point(100,100), new Point(300,100), {
    endCap: {
      type: "ArrowEnd",
      fill: {
        color: "red"
      },
      stroke: {
        color: "blue",
        width: 2
      }
    },
    selectable: false
  });
</script>

endCap.fill

String|Object

The connection end cap fill options or color.

<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: 100}));

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

  diagram.addConnection(connection);
</script>

endCap.stroke

String|Object

The connection end cap stroke options or color.

<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: 100}));

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

  diagram.addConnection(connection);
</script>

endCap.type

String

The connection end cap type.

The supported values are:

"none": no cap
"ArrowEnd": a filled arrow
"FilledCircle": a filled circle

Default: "none"

<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: 100}));

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

  diagram.addConnection(connection);
</script>

EndCap

endCap

endCap.fill

endCap.stroke

endCap.type

Related Members