connections.contentObject
Defines the connection content settings.
Example - configuring the connections content (text)
<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: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
text: "Step 1",
color: "purple",
fontFamily: "Tahoma",
fontSize: 16,
fontStyle: "italic",
fontWeight: 600
}
}
]
});
</script>connections.content.colorString
The color of the connection content text.
connections.content.fontFamilyString
The font family of the connection content text.
connections.content.fontSizeNumber
The font size of the connection content text.
connections.content.fontStyleString
The font style of the connection content text.
connections.content.fontWeightString
The font weight of the connection content text.
connections.content.templateString|Function
The template which renders the labels.
Example - using a template for the connection label
<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: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
template: "Iteration on #:kendo.toString(new Date(), 'MM/dd/yyyy')#"
}
}
]
});
</script>connections.content.textString
The text displayed for the connection.
connections.content.visualFunction
A function returning a visual element to render for the content of the connection.
Example - using a custom visual to render additional content in the connection label
<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: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
visual: function(e) {
var g = new kendo.dataviz.diagram.Group({
autoSize: true
});
var circle = new kendo.dataviz.diagram.Circle({
width: 15,
height: 15,
fill: {
color: "LimeGreen"
}
});
var text = new kendo.dataviz.diagram.TextBlock({
text: "Valid",
fontSize: 16,
x: 20
});
g.append(circle);
g.append(text);
return g;
}
}
}
]
});
</script>In this article