endCapString|Object
The connection end cap configuration or type name.
Example - configuring the endCap
<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.fillString|Object
The connection end 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, {
endCap: {
type: "ArrowEnd",
fill: "orange"
},
selectable: false
});
diagram.addConnection(connection);
</script>endCap.fill.colorString(default: "black")
The connection end 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, {
endCap: {
type: "ArrowEnd",
fill: {
color: "purple"
}
},
selectable: false
});
diagram.addConnection(connection);
</script>endCap.fill.opacity
The connection end 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, {
endCap: {
type: "ArrowEnd",
fill: {
color: "yellow",
opacity: 0.7
}
},
selectable: false
});
diagram.addConnection(connection);
</script>endCap.strokeString|Object
The connection end 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, {
endCap: {
type: "ArrowEnd",
stroke: "black"
},
selectable: false
});
diagram.addConnection(connection);
</script>endCap.stroke.colorString
The connection end 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, {
endCap: {
type: "ArrowEnd",
stroke: {
color: "cyan"
}
},
selectable: false
});
diagram.addConnection(connection);
</script>endCap.stroke.dashTypeString
The connection end 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, {
endCap: {
type: "ArrowEnd",
stroke: {
dashType: "dot"
}
},
selectable: false
});
diagram.addConnection(connection);
</script>endCap.stroke.widthNumber
The connection end 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, {
endCap: {
type: "ArrowEnd",
stroke: {
width: 4
}
},
selectable: false
});
diagram.addConnection(connection);
</script>endCap.typeString(default: "none")
The connection end cap type.
The supported values are:
- "none": no cap
- "ArrowEnd": 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, {
endCap: {
type: "FilledCircle"
},
selectable: false
});
diagram.addConnection(connection);
</script>In this article