connections.selectionObject
Defines the connection selection configuration.
Example - customizing the connection selection handles
<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",
startCap: "FilledCircle",
endCap: "ArrowEnd",
selection: {
handles: {
fill: {color: "Yellow"},
stroke: {color: "White"},
height: 20,
width: 20
}
}
}
]
});
</script>connections.selection.handlesObject
Defines the connection selection handles configuration.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
selection: {
handles: {
fill: "#ff6358",
stroke: { color: "#333" },
width: 8,
height: 8
}
}
}]
});
</script>connections.selection.handles.fillString|Object
Defines the handles fill options.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
selection: {
handles: {
fill: "#ff6358"
}
}
}]
});
</script>connections.selection.handles.fill.colorString
Defines the handles fill color.
Example
<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",
selection: {
handles: {
fill: {
color: "red"
}
}
}
}
]
});
</script>connections.selection.handles.strokeObject
Defines the handles stroke options.
Example
<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",
selection: {
handles: {
stroke: {
color: "blue",
width: 2,
dashType: "dash"
}
}
}
}
]
});
</script>connections.selection.handles.stroke.colorString
Defines the handles stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
selection: {
handles: {
stroke: {
color: "#333"
}
}
}
}]
});
</script>connections.selection.handles.widthNumber
The width of the handle elements.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
selection: {
handles: {
width: 10
}
}
}]
});
</script>connections.selection.handles.heightNumber
The height of the handle elements.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
selection: {
handles: {
height: 10
}
}
}]
});
</script>In this article