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

Connections.editable.points.midpoint.fill

configuration

The fill options of the connection midpoint handle.

connections.editable.points.midpoint.fill

Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        editable: {
            points: {
                midpoint: {
                    fill: {
                        color: "#ff9800",
                        opacity: 0.8
                    }
                }
            }
        }
    }]
});
</script>

connections.editable.points.midpoint.fill.color

String

The fill color of the connection midpoint handle.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        editable: {
            points: {
                midpoint: {
                    fill: {
                        color: "#ff9800"
                    }
                }
            }
        }
    }]
});
</script>

connections.editable.points.midpoint.fill.opacity

Number

The fill opacity of the connection midpoint handle. Accepts values from 0 (fully transparent) to 1 (fully opaque).

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        editable: {
            points: {
                midpoint: {
                    fill: {
                        color: "#ff9800",
                        opacity: 0.5
                    }
                }
            }
        }
    }]
});
</script>