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