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>connectionDefaults.content.positionString|Object(default: { vertical: "top", horizontal: "right" })
Defines the position of the label relative to the connection path. Can be set to "inline" to position the label along the connection path, or an object with vertical and horizontal properties.
Example - positioning connection label inline
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
position: "inline"
}
},
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>Example - positioning connection label using object configuration
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
position: {
vertical: "bottom",
horizontal: "left"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
],
connections: [
{ from: "1", to: "2" }
]
});
</script>connectionDefaults.content.position.verticalString(default: "top")
The vertical position of the label relative to horizontal connections. The supported values are "top" and "bottom".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
position: {
vertical: "bottom"
}
}
},
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.position.horizontalString(default: "right")
The horizontal position of the label relative to vertical connections. The supported values are "left" and "right".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
position: {
horizontal: "left"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 100, y: 300, content: { text: "Shape 2" } }
],
connections: [
{ from: "1", to: "2" }
]
});
</script>connectionDefaults.content.backgroundString
The background color of the connection label. Accepts valid CSS colors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#ffeb3b"
}
},
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.borderObject
The border options of the connection label. Applicable when background is set.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#fff",
border: {
color: "#000",
width: 1
}
}
},
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.border.colorString
The color of the connection label border.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#fff",
border: {
color: "#2196f3",
width: 2
}
}
},
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.border.widthNumber(default: 1)
The width of the connection label border.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#fff",
border: {
color: "#000",
width: 3
}
}
},
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.border.dashTypeString
The dash type of the connection label border. The supported values are "dash", "dashDot", "dot", "longDash", "longDashDot", "longDashDotDot", and "solid".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#fff",
border: {
color: "#000",
width: 1,
dashType: "dash"
}
}
},
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.paddingNumber|Object(default: { left: 4, right: 4, top: 2, bottom: 2 })
The padding options of the connection label. Applicable when background or border is set.
Example - using uniform padding
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#ffeb3b",
padding: 10
}
},
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.padding.topNumber(default: 2)
The top padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 10,
right: 4,
bottom: 2,
left: 4
}
}
},
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.padding.rightNumber(default: 4)
The right padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 2,
right: 15,
bottom: 2,
left: 4
}
}
},
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.padding.bottomNumber(default: 2)
The bottom padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 2,
right: 4,
bottom: 10,
left: 4
}
}
},
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.padding.leftNumber(default: 4)
The left padding of the connection label.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
background: "#ffeb3b",
padding: {
top: 2,
right: 4,
bottom: 2,
left: 15
}
}
},
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.offsetNumber(default: 5)
Defines the distance (in pixels) between the label and the connection path.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
content: {
text: "Connection",
offset: 15
}
},
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>