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.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
content: {
text: "Connection",
color: "#ff6358"
}
}]
});
</script>connections.content.fontFamilyString
The font family of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
content: {
text: "Connection",
fontFamily: "Arial, sans-serif"
}
}]
});
</script>connections.content.fontSizeNumber
The font size of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
content: {
text: "Connection",
fontSize: 14
}
}]
});
</script>connections.content.fontStyleString
The font style of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
content: {
text: "Connection",
fontStyle: "italic"
}
}]
});
</script>connections.content.fontWeightString
The font weight of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
content: {
text: "Connection",
fontWeight: "bold"
}
}]
});
</script>connections.content.templateString|Function
The template which renders the labels.
Example - using a template for the connection label
pseudo
<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: () => {
return (
"Iteration on " + kendo.toString(new Date(), "MM/dd/yyyy")
);
},
},
}
]
});
</script>connections.content.textString
The text displayed for the connection.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
content: {
text: "Connection Label"
}
}]
});
</script>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