Edit this page

editable.resize Boolean |Object (default: true)

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

Example - styling the resizing handles

The 'editable.resize' configuration below collects pretty much all of the available parameters.

<div id="diagram"></div>
<script>
 $("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Monday"
        }
    }, {
        id: "2",
        content: "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>

editable.resize.handles Object

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

editable.resize.handles.fill String |Object

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

editable.resize.handles.fill.color String

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

editable.resize.handles.fill.opacity Number (default: 1)

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

editable.resize.handles.height Number

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

editable.resize.handles.hover Object

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

editable.resize.handles.hover.fill String |Object

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

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.

editable.resize.handles.hover.fill.opacity Number (default: 1)

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

editable.resize.handles.hover.stroke Object

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

editable.resize.handles.hover.stroke.color String

Specifies the stroke color on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover.stroke.dashType String

Specifies the stroke dash type on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover.stroke.width Number

Specifies the stroke color on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.stroke Object

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

editable.resize.handles.stroke.color String

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

editable.resize.handles.stroke.dashType String

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

editable.resize.handles.stroke.width Number

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

editable.resize.handles.width Number

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy