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

ConnectionDefaults.endCap

configuration

The connections end cap configuration. Can be set to a configuration object or a string that represents the endCap.type value.

connectionDefaults.endCap

String|Object

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 200,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2"
      }
    ],
    connectionDefaults: {
      endCap: {
        type: "FilledCircle",
        fill: {
          color: "red"
        },
        stroke: {
          color: "blue",
          width: 2
        }
      }
    }
  });
</script>

connectionDefaults.endCap.anchor

Object

The anchor point of the arrow marker. This is the point where the marker will be positioned relative to the line. Applies when the type is "ArrowEnd" or "ArrowStart".

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      endCap: {
        type: "ArrowEnd",
        anchor: { x: 5, y: 5 }
      }
    }
  });
</script>

connectionDefaults.endCap.fill

String|Object

The connections end cap fill options or color.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            fill: "red",
            type: "ArrowEnd"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

connectionDefaults.endCap.path

String

The SVG path data for the arrow marker. Applies when the type is "ArrowEnd" or "ArrowStart".

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      endCap: {
        type: "ArrowEnd",
        path: "M 0,0 L 10,5 L 0,10 z"
      }
    }
  });
</script>

connectionDefaults.endCap.radius

Number

The radius of the filled circle marker. Applies when the type is "FilledCircle".

Default: 4

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      { id:"1", content: { text: "Start" }, x: 20, y: 20 },
      { id:"2", content: { text: "End" }, x: 200, y: 20 }
    ],
    connections:[
      { from: "1", to: "2" }
    ],
    connectionDefaults: {
      endCap: {
        type: "FilledCircle",
        radius: 8
      }
    }
  });
</script>

connectionDefaults.endCap.stroke

String|Object

The connections end cap stroke options or color.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            stroke: "green",
            type: "ArrowEnd"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

connectionDefaults.endCap.type

String

The end cap type used in connections.

Default: "none"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        endCap: {
            type: "ArrowEnd"
        }
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

The supported values are:

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

Related Members