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 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>In this article