editable.tools Array

Specifies the the toolbar tools. Supports all options supported by the toolbar.items property. Predefined tools are:

• "edit" - The selected item can be edited.
• "createShape" - Adds an empty shape data item and a popup window is displayed.
• "createConnection" - Adds an empty connection data item and a popup window is displayed.
• "undo" - Undoes the previous action.
• "redo" - Executes again the previously undone action.
• "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.

If the toolbar or toolbar items are not visible, verify that the Kendo UI stylesheets are included in the header.

Example - using predefined tools

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    }],
    editable: {
      tools: [{
        name: "delete"
      }, {
        name: "rotateClockwise",
        step: 45
      }, {
        name: "rotateAnticlockwise",
        step: 45
      }]
    }
  });
</script>

Example - using custom tools

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    }],
    editable: {
      tools: [{
        type: "button",
        text: "Set Selected 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>

editable.tools.name String

The name of the tool. The built-in tools are "edit", "createShape", "createConnection", "undo", "redo", "rotateClockwise" and "rotateAnticlockwise".

editable.tools.step Number (default: 90)

The step of the rotateClockwise and rotateAnticlockwise tools.