shapes.editable.tools Array
Specifies the toolbar tools. Provides all options supported for toolbar.items. The predefined tools are:
- "edit" - The selected item can be edited.
- "delete" - The selected items can be deleted.
- "rotateClockwise" - The selected items can be rotated clockwise. The default rotation value is 90 degree.
- "rotateAnticlockwise" - The selected items can be rotated anticlockwise. The default rotation value is 90 degree.
Example - customizing the list of tools per shape
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Monday"
},
editable: {
tools: [{
name: "rotateClockwise"
}, {
name: "rotateAnticlockwise"
}]
},
x: 100,
y: 20
}, {
id: "2",
content: {
text: "Tuesday"
},
editable: {
tools: [{
name: "delete"
}, {
name: "rotateClockwise"
}, {
name: "rotateAnticlockwise"
}]
},
x: 250,
y: 20
}, {
id: "3",
content: {
text: "Wednesday"
},
x: 250,
y: 200
}],
connections: [{
from: "1",
to: "2"
},{
from: "2",
to: "3"
}],
connectionDefaults: {
endCap: "ArrowEnd"
}
});
</script>
Example - showing a custom tool for a shape
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
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' />"
}]
},
content: {
text: "Shape 1"
},
x: 100,
y: 100
}
]
});
</script>