connectionDefaults.hoverObject
Defines the default styling that is applied when the user hovers over a connection.
Example - turning the connection red on hover
<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>connectionDefaults.hover.strokeObject
Defines the default hover configuration of the connection lines.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
hover: {
stroke: {
color: "#FF6600",
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.hover.stroke.colorString(default: "#70CAFF")
Defines the highlight color when the mouse pointer hovers over connections.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
hover: {
stroke: {
color: "#FF0000",
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>In this article