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

Connections.editable.points

configuration

Specifies whether the connection path can be reshaped by the user. When enabled, dragging a connection handle adds or updates connection points to reflect the new route. User-defined points are shown as hollow circular markers and can be removed by double-clicking them.

connections.editable.points

Boolean|Object

Default: true

<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: false
        }
    }]
});
</script>

connections.editable.points.midpoint

Object

Defines the appearance of the connection midpoint handles.

<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: "#2196f3" },
                    stroke: { color: "#000000", width: 1 },
                    radius: 4
                }
            }
        }
    }]
});
</script>

connections.editable.points.snap

Number

The snap distance for connection points when dragging.

Default: 6

<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: {
                snap: 10
            }
        }
    }]
});
</script>

connections.editable.points.vertex