connectionsDataSource Object|Array|kendo.data.DataSource
Defines the data source of the connections.
Example - setting the connectionsDataSource and dynamic labelling
Note that the 'from' and 'to' fields in the connectionsDataSource refer to the 'id' of the dataSource. The label on the connection is set via the connectionsDefaults.content.template.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
dataSource: [
{id:"one", name:"One"},
{id:"two", name:"Two"},
{id:"four", name:"Four"},
],
connectionsDataSource:[
{from:"one", to:"two", label: "plus one"},
{from:"one", to:"four", label: "plus three"}
],
layout: {
type: "tree",
subtype: "right"
},
shapeDefaults: {
type: "circle",
content: {
template: "#= name #"
},
width: 70,
height: 70,
hover: {
fill: "Orange"
}
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 1
},
type: "polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd",
content:{
template:"#= label#"
}
}
});
</script>