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.
Example
<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: "Connection",
color: "red"
},
selectable: false
});
diagram.addConnection(connection);
</script>content.fontFamilyString
The font family of the connection content text.
Example
<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: "Connection",
fontFamily: "Arial"
},
selectable: false
});
diagram.addConnection(connection);
</script>content.fontSizeNumber
The font size of the connection content text.
Example
<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: "Connection",
fontSize: 16
},
selectable: false
});
diagram.addConnection(connection);
</script>content.fontStyleString
The font style of the connection content text.
Example
<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: "Connection",
fontStyle: "italic"
},
selectable: false
});
diagram.addConnection(connection);
</script>content.fontWeightString
The font weight of the connection content text.
Example
<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: "Connection",
fontWeight: "bold"
},
selectable: false
});
diagram.addConnection(connection);
</script>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
<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: {
template: function(dataItem){
return `Connection --->`
}
},
selectable: false
});
diagram.addConnection(connection);
</script>content.textString
The static text displayed on the connection.
Example
<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: "Custom Connection Text"
},
selectable: false
});
diagram.addConnection(connection);
</script>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