connections.editableBoolean|Object(default: true)
Defines the shape editable options.
Example - enabling only deletion for 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: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
text: "Step 1"
},
editable: {
tools: ["delete"]
}
}
]
});
</script>connections.editable.toolsArray
Specifies the toolbar tools. Supports all options supported for the toolbar.items. Predefined tools are:
- "edit" - The selected item can be edited
- "delete" - The selected items can be deleted
Example - showing custom tool for 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: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
content: {
text: "Step 1"
},
editable: {
tools: [
{ type: "button", id: "1", text: "Info", icon: "info-circle", click: showMoreInfo },
]
}
}
]
});
function showMoreInfo(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Clicked custom tool with id: " + e.id);
}
</script>connections.editable.tools.nameString
The name of the tool. The built-in tools are "edit" and "delete".
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",
editable: {
tools: [
{name: "edit"},
{name: "delete"}
]
}
}]
});
</script>connections.editable.dragBoolean(default: true)
Specifies if the connection can be dragged.
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",
editable: {
drag: false
}
}]
});
</script>connections.editable.removeBoolean(default: true)
Specifies if the connection can be removed.
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",
editable: {
remove: false
}
}]
});
</script>connections.editable.pointsBoolean|Object(default: true)
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.
Example - disabling connection points editing for a connection
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: false
}
}]
});
</script>connections.editable.points.snapNumber(default: 6)
The snap distance for connection points when dragging.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
snap: 10
}
}
}]
});
</script>connections.editable.points.vertexObject
Defines the appearance of the connection vertex handles.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
fill: { color: "#ff0000" },
stroke: { color: "#000000", width: 2 },
radius: 6
}
}
}
}]
});
</script>connections.editable.points.vertex.fillObject
The fill options of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
fill: {
color: "#4caf50",
opacity: 0.8
}
}
}
}
}]
});
</script>connections.editable.points.vertex.fill.colorString
The fill color of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
fill: {
color: "#4caf50"
}
}
}
}
}]
});
</script>connections.editable.points.vertex.fill.opacityNumber(default: 1)
The fill opacity of the connection vertex handle. Accepts values from 0 (fully transparent) to 1 (fully opaque).
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
fill: {
color: "#4caf50",
opacity: 0.5
}
}
}
}
}]
});
</script>connections.editable.points.vertex.strokeObject
The stroke options of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
stroke: {
color: "#000000",
width: 2
}
}
}
}
}]
});
</script>connections.editable.points.vertex.stroke.colorString
The stroke color of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
stroke: {
color: "#000000"
}
}
}
}
}]
});
</script>connections.editable.points.vertex.stroke.widthNumber(default: 1)
The stroke width of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
stroke: {
color: "#000000",
width: 2
}
}
}
}
}]
});
</script>connections.editable.points.vertex.radiusNumber
The radius of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
vertex: {
radius: 8
}
}
}
}]
});
</script>connections.editable.points.midpointObject
Defines the appearance of the connection midpoint handles.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
fill: { color: "#2196f3" },
stroke: { color: "#000000", width: 1 },
radius: 4
}
}
}
}]
});
</script>connections.editable.points.midpoint.fillObject
The fill options of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
fill: {
color: "#ff9800",
opacity: 0.8
}
}
}
}
}]
});
</script>connections.editable.points.midpoint.fill.colorString
The fill color of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
fill: {
color: "#ff9800"
}
}
}
}
}]
});
</script>connections.editable.points.midpoint.fill.opacityNumber(default: 1)
The fill opacity of the connection midpoint handle. Accepts values from 0 (fully transparent) to 1 (fully opaque).
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
fill: {
color: "#ff9800",
opacity: 0.5
}
}
}
}
}]
});
</script>connections.editable.points.midpoint.strokeObject
The stroke options of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
stroke: {
color: "#333333",
width: 1
}
}
}
}
}]
});
</script>connections.editable.points.midpoint.stroke.colorString
The stroke color of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
stroke: {
color: "#333333"
}
}
}
}
}]
});
</script>connections.editable.points.midpoint.stroke.widthNumber(default: 1)
The stroke width of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
stroke: {
color: "#333333",
width: 2
}
}
}
}
}]
});
</script>connections.editable.points.midpoint.radiusNumber
The radius of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
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",
editable: {
points: {
midpoint: {
radius: 5
}
}
}
}]
});
</script>