startCapString|Object
The connection start cap configuration or type name.
Example - configuring the startCap
<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), {
startCap: {
type: "FilledCircle",
fill: {
color: "red"
},
stroke: {
color: "blue",
width: 2
}
},
selectable: false
});
</script>startCap.fillString|Object
The connection start cap fill options or color.
Example
<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, {
startCap: {
type: "arrow",
fill: "red"
},
selectable: false
});
diagram.addConnection(connection);
</script>startCap.fill.colorString(default: "black")
The connection start cap fill color.
Example
<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, {
startCap: {
type: "arrow",
fill: {
color: "green"
}
},
selectable: false
});
diagram.addConnection(connection);
</script>startCap.fill.opacity
The connection start cap fill opacity.
Example
<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, {
startCap: {
type: "arrow",
fill: {
color: "blue",
opacity: 0.5
}
},
selectable: false
});
diagram.addConnection(connection);
</script>startCap.strokeString|Object
The connection start cap stroke options or color.
Example
<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, {
startCap: {
type: "arrow",
stroke: "red"
},
selectable: false
});
diagram.addConnection(connection);
</script>startCap.stroke.colorString
The connection start cap stroke color.
Example
<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, {
startCap: {
type: "arrow",
stroke: {
color: "purple"
}
},
selectable: false
});
diagram.addConnection(connection);
</script>startCap.stroke.dashTypeString
The connection start cap stroke dash type.
Example
<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, {
startCap: {
type: "arrow",
stroke: {
dashType: "dash"
}
},
selectable: false
});
diagram.addConnection(connection);
</script>startCap.stroke.widthNumber
The connection start cap stroke width.
Example
<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, {
startCap: {
type: "arrow",
stroke: {
width: 3
}
},
selectable: false
});
diagram.addConnection(connection);
</script>startCap.typeString(default: "none")
The connection start cap type.
The supported values are:
- "none": no cap
- "ArrowStart": a filled arrow
- "FilledCircle": a filled circle
Example
<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, {
startCap: {
type: "FilledCircle"
},
selectable: false
});
diagram.addConnection(connection);
</script>In this article