connectionDefaults.selectionObject
Defines the connections selection configuration.
Example
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.selection.handlesObject
Defines default handles configuration for selected connections.
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"
}
],
connectionDefaults: {
selection: {
handles: {
fill: {color: "#ff6358"},
stroke: {color: "#333"},
height: 8,
width: 8
}
}
}
});
</script>connectionDefaults.selection.handles.fillString|Object
Defines the handles fill options when connections are selected.
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"
}
],
connectionDefaults: {
selection: {
handles: {
fill: "#ff6358"
}
}
}
});
</script>connectionDefaults.selection.handles.fill.colorString
Defines the handles fill color when connections are selected.
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"
}
],
connectionDefaults: {
selection: {
handles: {
fill: {
color: "#ff6358"
}
}
}
}
});
</script>connectionDefaults.selection.handles.strokeObject
Defines the handles stroke options when connections are selected.
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"
}
],
connectionDefaults: {
selection: {
handles: {
stroke: {
color: "#333",
width: 2
}
}
}
}
});
</script>connectionDefaults.selection.handles.stroke.colorString
Defines the handles stroke color when connections are selected.
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"
}
],
connectionDefaults: {
selection: {
handles: {
stroke: {
color: "#333",
width: 2
}
}
}
}
});
</script>connectionDefaults.selection.handles.widthNumber
The width of the handle elements when connections are selected.
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"
}
],
connectionDefaults: {
selection: {
handles: {
width: 10
}
}
}
});
</script>connectionDefaults.selection.handles.heightNumber
The height of the handle elements when connections are selected.
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"
}
],
connectionDefaults: {
selection: {
handles: {
height: 10
}
}
}
});
</script>In this article