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

ConnectionDefaults.startCap

configuration

The connection start cap configuration or type name.

connectionDefaults.startCap

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: {
      startCap: {
        type: "FilledCircle",
        fill: {
          color: "yellow"
        },
        stroke: {
          color: "blue",
          width: 3
        }
      }
    }
  });
</script>

connectionDefaults.startCap.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: {
      startCap: {
        type: "ArrowStart",
        anchor: { x: 5, y: 5 }
      }
    }
  });
</script>

connectionDefaults.startCap.fill

String|Object

The connection start cap fill options or color.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            fill: "red",
            type: "ArrowStart"
        }
    },
    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.startCap.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: {
      startCap: {
        type: "ArrowStart",
        path: "M 0,0 L 10,5 L 0,10 z"
      }
    }
  });
</script>

connectionDefaults.startCap.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: {
      startCap: {
        type: "FilledCircle",
        radius: 8
      }
    }
  });
</script>

connectionDefaults.startCap.stroke

String|Object

The connection start cap stroke options or color.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            stroke: "green",
            type: "ArrowStart"
        }
    },
    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.startCap.type

String

The connection start cap type.

The supported values are:

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

Default: "none"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        startCap: {
            type: "ArrowStart"
        }
    },
    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>

Related Members