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

Editable.resize.handles.stroke

configuration

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

editable.resize.handles.stroke

Object

<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.stroke.color

String

Specifies the stroke color 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: "purple"
                }
            }
        }
    }
});
</script>

editable.resize.handles.stroke.dashType

String

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

The following dash types are supported:

"dash" - A line that consists of dashes
"dashDot" - A line that consists of a repeating pattern of dash-dot
"dot" - A line that consists of dots
"longDash" - A line that consists of a repeating pattern of long-dash
"longDashDot" - A line that consists of a repeating pattern of long-dash-dot
"longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
"solid" - A solid line

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

editable.resize.handles.stroke.width

Number

Specifies the stroke thickness 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: "red",
                    width: 3
                }
            }
        }
    }
});
</script>