New to Kendo UI for jQuery? Start a free 30-day trial

Shapes.editable

configuration

Defines the shape editable options.

shapes.editable

Boolean|Object

Default: true

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        x: 100,
        y: 100,
        content: { text: "Shape 1" },
        editable: {
            connect: true,
            drag: true,
            resize: true,
            rotate: true,
            remove: true
        }
    }]
});
</script>

Specifies whether the connectors should appear on hover. If set to false, the user will not be able to create new connections from this shape to other shapes. Also, it will not be possible to change the connector of an existing connection between this and another shape.

Default: true

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Day 1"
      },
      editable: {
        connect: false
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Day 2"
      },
      x: 450,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Day 3"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

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.

<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>

<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>

Shapes.editable

shapes.editable

shapes.editable.connect

shapes.editable.tools

Related Members