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

Editable.resize.handles.hover.fill

configuration

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

editable.resize.handles.hover.fill

String|Object

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

editable.resize.handles.hover.fill.color

String

Specifies the fill color on hovering over 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: {
                hover: {
                    fill: {
                        color: "orange"
                    }
                }
            }
        }
    }
});
</script>

editable.resize.handles.hover.fill.opacity

Number

Specifies the fill opacity on hovering over the resizing handles. See the editable.resize configuration for an example.

Default: 1

<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.6
                    }
                }
            }
        }
    }
});
</script>