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

Editable.rotate

configuration

Specifies whether the shapes can be rotated. Note that changing this setting after creating the diagram will have no effect.

editable.rotate

Boolean|Object

Default: true

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

Specifies the fill settings of the rotation thumb.

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

Specifies the stroke settings of the rotation thumb.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "Rotatable Shape"
            },
            x: 100,
            y: 100
        }
    ],
    editable: {
        rotate: {
            stroke: {
                color: "green",
                width: 3
            }
        }
    }
});
</script>