ConnectionDefaults
configurationDefines the defaults of the connections. Whenever a connection is created, the specified connectionDefaults will be used and merged with the (optional) configuration passed through the connection creation method.
connectionDefaults
Object<div id="diagram"></div>
<script>
var Point = kendo.dataviz.diagram.Point;
$("#diagram").kendoDiagram({
shapes:[
{
id:"1",
content:{
text: "State 1"
},
x: 20,
y: 20
},
{
id:"2",
content: {
text: "State 2"
},
x: 160,
y: 20
},
{
id:"3",
content: {
text: "State 3"
},
x: 60,
y: 160
}
],
connections:[
{
from: new Point(100,100),
to: new Point(100,200)
},
{
from: "1",
to: "2"
}
],
connectionDefaults: {
stroke: {
color: "#979797",
width: 1
},
type:"polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd"
}
});
</script>Defines accessibility options for connections.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
accessibility: {
role: "graphics-symbol",
ariaRoleDescription: "Connection",
ariaLabel: "Connects shapes in the diagram"
}
},
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>Defines the label displayed on the connection path.
<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>Defines the corner radius of the connection.
Default: 0
<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: 100
}
],
connections:[
{
from: "1",
to: "2",
points: [
{x: 150, y: 20},
{x: 150, y: 150}
],
type: "polyline"
}
],
connectionDefaults: {
cornerRadius: 5
}
});
</script>connectionDefaults.editable
Boolean|ObjectDefines the editing behavior of the connections.
Default: true
<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: {
template: "#: dataItem.label #"
},
editable: false
}
});
</script>connectionDefaults.endCap
String|ObjectThe connections end cap configuration. Can be set to a configuration object or a string that represents the endCap.type value.
<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: 200,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
}
],
connectionDefaults: {
endCap: {
type: "FilledCircle",
fill: {
color: "red"
},
stroke: {
color: "blue",
width: 2
}
}
}
});
</script>Specifies the name of the source shape connector that should be used by default. Valid values are "top", "right", "bottom", "left" and "auto".
Default: "Auto"
<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: 200,
y: 20
},
{
id:"3",
content: {
text: "State 3"
},
x: 380,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
},
{
from: "2",
to: "3"
}
],
connectionDefaults: {
fromConnector: "bottom"
}
});
</script>connectionDefaults.hover
ObjectDefines the default styling that is applied when the user hovers over a connection.
<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: 200,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
}
],
connectionDefaults: {
hover: {
stroke: {color: "red", width: 2}
},
stroke: {
color: "#979797",
width: 4
},
type: "polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd"
}
});
</script>Specifies if connections can be selected.
Default: true
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
selectable: false
},
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>Defines the connections selection configuration.
Example - styling the connections selection
<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: 200,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
}
],
connectionDefaults: {
type: "polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd",
selection: {
handles: {
fill: {color: "Yellow"},
stroke: {color: "White"},
height: 20,
width: 20
}
}
}
});
</script>connectionDefaults.startCap
String|ObjectThe connection start cap configuration or type name.
<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: 200,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
}
],
connectionDefaults: {
startCap: {
type: "FilledCircle",
fill: {
color: "yellow"
},
stroke: {
color: "blue",
width: 3
}
}
}
});
</script>Defines the connection line configuration.
<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: 200,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
}
],
connectionDefaults: {
stroke: {
color: "blue",
width: 3
}
}
});
</script>Specifies the name of the target shape connector that should be used by default. Valid values are "top", "right", "bottom", "left" and "auto".
Default: "Auto"
<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: 200,
y: 20
},
{
id:"3",
content: {
text: "State 3"
},
x: 380,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
},
{
from: "2",
to: "3"
}
],
connectionDefaults: {
toConnector: "top"
}
});
</script>connectionDefaults.type
StringSpecifies the connections type. The supported values are:
- "Polyline" - connects the defined intermediate points.
- "Cascading" - discards given points and defines a cascading path between the endpoints.
Default: "cascading"
<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: 100
}
],
connections:[
{
from: "1",
to: "2",
points: [
{x: 150, y: 20},
{x: 150, y: 150}
],
type: "polyline"
}
]
});
</script>Related Members
- connectionDefaults.content - Defines the label displayed on the connection path.
- connectionDefaults.content.position - 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.
- connectionDefaults.content.border - The border options of the connection label. Applicable when background is set.
- connectionDefaults.content.padding - The padding options of the connection label. Applicable when background or border is set.
- connectionDefaults.editable - Defines the editing behavior of the connections.
- connectionDefaults.editable.tools - Specifies the toolbar tools. Supports all options supported for the toolbar.items. If set to false, no edit tools will be displayed.
- connectionDefaults.editable.points - Specifies whether the connection path can be reshaped by the user. When enabled, dragging a connection handle adds or updates connection points to reflect the new route. User-defined points are shown as hollow circular markers and can be removed by double-clicking them.
- connectionDefaults.editable.points.vertex - Defines the appearance of the connection vertex handles.
- connectionDefaults.editable.points.vertex.fill - The fill options of the connection vertex handle.
- connectionDefaults.editable.points.vertex.stroke - The stroke options of the connection vertex handle.
- connectionDefaults.editable.points.midpoint - Defines the appearance of the connection midpoint handles.
- connectionDefaults.editable.points.midpoint.fill - The fill options of the connection midpoint handle.
- connectionDefaults.editable.points.midpoint.stroke - The stroke options of the connection midpoint handle.
- connectionDefaults.endCap - The connections end cap configuration. Can be set to a configuration object or a string that represents the endCap.type value.
- connectionDefaults.endCap.fill - The connections end cap fill options or color.
- connectionDefaults.endCap.stroke - The connections end cap stroke options or color.
- connectionDefaults.endCap.anchor - The anchor point of the arrow marker. This is the point where the marker will be positioned relative to the line. Applies when the type is "ArrowEnd" or "ArrowStart".
- connectionDefaults.hover - Defines the default styling that is applied when the user hovers over a connection.
- connectionDefaults.hover.stroke - Defines the default hover configuration of the connection lines.
- connectionDefaults.selection - Defines the connections selection configuration.
- connectionDefaults.selection.handles - Defines default handles configuration for selected connections.
- connectionDefaults.selection.handles.fill - Defines the handles fill options when connections are selected.
- connectionDefaults.selection.handles.stroke - Defines the handles stroke options when connections are selected.
- connectionDefaults.startCap - The connection start cap configuration or type name.
- connectionDefaults.startCap.fill - The connection start cap fill options or color.
- connectionDefaults.startCap.stroke - The connection start cap stroke options or color.
- connectionDefaults.startCap.anchor - The anchor point of the arrow marker. This is the point where the marker will be positioned relative to the line. Applies when the type is "ArrowEnd" or "ArrowStart".
- connectionDefaults.stroke - Defines the connection line configuration.
- connectionDefaults.accessibility - Defines accessibility options for connections.