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

ConnectionDefaults.editable.points.midpoint.stroke

configuration

The stroke options of the connection midpoint handle.

connectionDefaults.editable.points.midpoint.stroke

Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        editable: {
            points: {
                midpoint: {
                    stroke: {
                        color: "#333333",
                        width: 1
                    }
                }
            }
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.editable.points.midpoint.stroke.color

String

The stroke color of the connection midpoint handle.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        editable: {
            points: {
                midpoint: {
                    stroke: {
                        color: "#333333"
                    }
                }
            }
        }
    },
    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" }
    ]
});
</script>

connectionDefaults.editable.points.midpoint.stroke.width

Number

The stroke width of the connection midpoint handle.

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    connectionDefaults: {
        editable: {
            points: {
                midpoint: {
                    stroke: {
                        color: "#333333",
                        width: 2
                    }
                }
            }
        }
    },
    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" }
    ]
});
</script>