contentObject
Defines the options for the label displayed on the connection path.
Example - configuring the content
<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, {
content: {
text: "Step 1",
color: "#336699",
fontSize: 16,
fontStyle: "italic",
fontWeight: "bold"
},
selectable: false
});
diagram.addConnection(connection);
</script>content.colorString
The color of the connection content text.
content.fontFamilyString
The font family of the connection content text.
content.fontSizeNumber
The font size of the connection content text.
content.fontStyleString
The font style of the connection content text.
content.fontWeightString
The font weight of the connection content text.
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
content.textString
The static text displayed on the connection.
content.visualFunction
A function returning a visual element to render for the content of a connection.
Example - configuring the content
<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, {
content: {
text: "Step 1",
visual: function(e){
var group = new kendo.dataviz.diagram.Group();
group.append(new kendo.dataviz.diagram.TextBlock({ text: e.text }));
group.rotate(-90, new kendo.dataviz.diagram.Point(10, 0));
return group;
}
},
selectable: false
});
diagram.addConnection(connection);
</script>In this article