connectionDefaults.contentObject
Defines the label displayed on the connection path.
Example - customizing connection content
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
dataSource: [
{id:"one", name:"One"},
{id:"two", name:"Two"},
{id:"five", name:"Five"},
],
connectionsDataSource:[
{from:"one", to:"two", label: "plus one"},
{from:"one", to:"five", label: "plus three"}
],
layout: "layered",
connectionDefaults: {
content: {
color: "green",
fontFamily: "Segoe UI",
fontSize: 16,
fontStyle: "italic",
fontWeight: 200,
template: "#: dataItem.label #"
}
}
});
</script>connectionDefaults.content.colorString
The color of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
color: "#FF0000",
text: "Connection Text"
}
},
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" }
]
});
</script>connectionDefaults.content.fontFamilyString
The font family of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
fontFamily: "Arial, sans-serif",
text: "Connection Text"
}
},
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" }
]
});
</script>connectionDefaults.content.fontSizeNumber
The font size of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
fontSize: 16,
text: "Connection Text"
}
},
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" }
]
});
</script>connectionDefaults.content.fontStyleString
The font style of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
fontStyle: "italic",
text: "Connection Text"
}
},
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" }
]
});
</script>connectionDefaults.content.fontWeightString
The font weight of the connection content text.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
fontWeight: "bold",
text: "Connection Text"
}
},
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" }
]
});
</script>connectionDefaults.content.templateString|Function
The template which renders the labels.
The fields which can be used in the template are:
- dataItem - the data item, in case a field has been specified
Example - showing values from the connectionDataSource in the connection labels
<div id="diagram"></div>
<script>
var serviceRoot = "https://demos.telerik.com/service/v2/core";
var shapesDataSource = {
transport: {
read: {
url: serviceRoot + "/DiagramShapes"
}
},
schema: {
model: {
fields: {
id: { from: "Id", type: "number" },
JobTitle: { type: "string" },
Color: { type: "string" }
}
}
}
};
var connectionsDataSource = {
transport: {
read: {
url: serviceRoot + "/DiagramConnections"
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "Id", type: "number" },
from: { from: "FromShapeId", type: "number" },
to: { from: "ToShapeId", type: "number" },
fromX: { from: "FromPointX", type: "number" },
fromY: { from: "FromPointY", type: "number" },
toX: { from: "ToPointX", type: "number" },
toY: { from: "ToPointY", type: "number" }
}
}
}
};
$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
connectionsDataSource: connectionsDataSource,
layout: {
type: "layered"
},
shapeDefaults: {
content: {
template: "#= dataItem.JobTitle #"
},
width: 200
},
connectionDefaults: {
content: {
template: "#: dataItem.from # - #: dataItem.to #"
}
},
dataBound: onDataBound
});
function onDataBound(e) {
var that = this;
setTimeout(function () {
that.bringIntoView(that.shapes);
}, 0);
}
</script>connectionDefaults.content.textString
The static text displayed on the connection.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection Text"
}
},
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" }
]
});
</script>connectionDefaults.content.visualFunction
A function returning a visual element to render for the content of a connection.
Example - using a content visual for connections
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
dataSource: [{
"name" : "Telerik",
"items": [
{"name": "Kendo UI"},
{"name": "NativeScript"}
]
}],
connectionDefaults: {
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: "Foo",
fontSize: 16,
x: 30
});
g.append(circle);
g.append(text);
return g;
}
}
},
layout: {
type: "tree"
}
});
</script>In this article