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

Editable.resize.handles

configuration

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

editable.resize.handles

Object

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

editable.resize.handles.fill

String|Object

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

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "Draggable Shape"
            },
            x: 100,
            y: 100
        }
    ],
    editable: {
        resize: {
            handles: {
                fill: {
                    color: "yellow",
                    opacity: 0.8
                }
            }
        }
    }
});
</script>

editable.resize.handles.height

Number

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

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

editable.resize.handles.hover

Object

Specifies the settings of the resizing handles on hovering over them. See the editable.resize configuration for an example.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "Draggable Shape"
            },
            x: 100,
            y: 100
        }
    ],
    editable: {
        resize: {
            handles: {
                hover: {
                    fill: {
                        color: "red",
                        opacity: 0.8
                    },
                    stroke: {
                        color: "blue",
                        width: 2
                    }
                }
            }
        }
    }
});
</script>

editable.resize.handles.stroke

Object

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

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "Draggable Shape"
            },
            x: 100,
            y: 100
        }
    ],
    editable: {
        resize: {
            handles: {
                stroke: {
                    color: "orange",
                    width: 2,
                    dashType: "dash"
                }
            }
        }
    }
});
</script>

editable.resize.handles.width

Number

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

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

Editable.resize.handles

editable.resize.handles

editable.resize.handles.fill

editable.resize.handles.height

editable.resize.handles.hover

editable.resize.handles.stroke

editable.resize.handles.width

Related Members