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

Selectable.fill

configuration

Defines the fill configuration for the selection rectangle.

selectable.fill

String|Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    selectable: {
        key: "shift",
        fill: {
            color: "#8ebc00",
            opacity: 0.2
        }
    }
});
</script>

selectable.fill.color

String

Defines the fill color of the selection rectangle.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ],
    selectable: {
        key: "shift",
        fill: {
            color: "rgba(33, 150, 243, 0.3)"
        }
    }
});
</script>

selectable.fill.opacity

Number

Defines the fill opacity of the selection rectangle. Ranges from 0 (completely transparent) to 1 (opaque).

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
    ],
    selectable: {
        key: "shift",
        fill: {
            color: "#2196f3",
            opacity: 0.1
        }
    }
});
</script>