connectionDefaults.editableBoolean|Object(default: true)
Defines the editing behavior of the connections.
Example - disabling interaction with the Diagram connections
<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.editable.dragBoolean(default: true)
Specifies if the connections can be dragged.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
drag: 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>connectionDefaults.editable.removeBoolean(default: true)
Specifies if the connections can be removed.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
remove: 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>connectionDefaults.editable.toolsArray`|`Boolean
Specifies the toolbar tools. Supports all options supported for the toolbar.items. If set to false, no edit tools will be displayed.
Predefined tools are:
- "edit" - The selected item can be edited
- "delete" - The selected items can be deleted
Example - using predefined tools
<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: {
tools: ["delete"]
}
}
});
</script>Example - using custom tools
<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: {
editable: {
tools: [{
type: "button",
text: "Set Content",
click: function() {
var selected = $("#diagram").getKendoDiagram().select();
var content = $("#content").val();
for (var idx = 0; idx < selected.length; idx++) {
selected[idx].content(content);
}
}
}, {
template: "<input id='content' class='k-textbox' value='Foo' />"
}]
}
}
});
</script>connectionDefaults.editable.tools.nameString
The name of the tool. The built-in tools are "edit" and "delete".
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
tools: [
{ name: "edit" },
{ name: "delete" }
]
}
},
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.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
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: false
}
},
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" }
]
});
</script>connectionDefaults.editable.points.snapNumber(default: 6)
The snap distance for connection points when dragging.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
snap: 10
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.vertexObject
Defines the appearance of the connection vertex handles.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
vertex: {
fill: { color: "#ff0000" },
stroke: { color: "#000000", width: 2 },
radius: 6
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.vertex.fillObject
The fill options of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
vertex: {
fill: {
color: "#4caf50",
opacity: 0.8
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.vertex.fill.colorString
The fill color of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
vertex: {
fill: {
color: "#4caf50"
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.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({
connectionDefaults: {
editable: {
points: {
vertex: {
fill: {
color: "#4caf50",
opacity: 0.5
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.vertex.strokeObject
The stroke options of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
vertex: {
stroke: {
color: "#000000",
width: 2
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.vertex.stroke.colorString
The stroke color of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
vertex: {
stroke: {
color: "#000000"
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.vertex.stroke.widthNumber(default: 1)
The stroke width of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
vertex: {
stroke: {
color: "#000000",
width: 2
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.vertex.radiusNumber
The radius of the connection vertex handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
vertex: {
radius: 8
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.midpointObject
Defines the appearance of the connection midpoint handles.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
midpoint: {
fill: { color: "#2196f3" },
stroke: { color: "#000000", width: 1 },
radius: 4
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.midpoint.fillObject
The fill options of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
midpoint: {
fill: {
color: "#ff9800",
opacity: 0.8
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.midpoint.fill.colorString
The fill color of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
midpoint: {
fill: {
color: "#ff9800"
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.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({
connectionDefaults: {
editable: {
points: {
midpoint: {
fill: {
color: "#ff9800",
opacity: 0.5
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.midpoint.strokeObject
The stroke options of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
midpoint: {
stroke: {
color: "#333333",
width: 1
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.midpoint.stroke.colorString
The stroke color of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
midpoint: {
stroke: {
color: "#333333"
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.midpoint.stroke.widthNumber(default: 1)
The stroke width of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
midpoint: {
stroke: {
color: "#333333",
width: 2
}
}
}
}
},
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" }
]
});
</script>connectionDefaults.editable.points.midpoint.radiusNumber
The radius of the connection midpoint handle.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
connectionDefaults: {
editable: {
points: {
midpoint: {
radius: 5
}
}
}
},
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" }
]
});
</script>