New to Kendo UI for jQueryStart a free 30-day trial

Editable.resize

configuration

Defines the look-and-feel of the shape resizing handles.

editable.resize

Boolean|Object

Default: true

<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: {
      resize: {
        handles: {
          fill: {
            color: "red",
            opacity: 0.5
          },
          height: 10,
          width: 10,
          stroke: {
            color:"blue",
            width:1,
            dashType:"dot"
          },
          hover: {
            fill: {
              color:"green",
              opcaity:.8
            },
            stroke: {
              color:"purple",
              width:5
            }
          }
        }
      }
    }
  });
</script>

Specifies the settings of the resizing handles. See the editable.resize configuration for an example.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
      { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ],
    editable: {
      resize: {
        handles: {
          fill: { color: "#ff6358" },
          stroke: { color: "#333" },
          width: 8,
          height: 8
        }
      }
    }
});
</script>

The offset distance of resize handles from the shape edge.

Default: 1

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