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

Connections.editable.points.vertex

configuration

Defines the appearance of the connection vertex handles.

connections.editable.points.vertex

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: {
                vertex: {
                    fill: { color: "#ff0000" },
                    stroke: { color: "#000000", width: 2 },
                    radius: 6
                }
            }
        }
    }]
});
</script>

connections.editable.points.vertex.fill

Object

The fill options of the connection vertex 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: {
                vertex: {
                    fill: {
                        color: "#4caf50",
                        opacity: 0.8
                    }
                }
            }
        }
    }]
});
</script>

connections.editable.points.vertex.radius

Number

The radius of the connection vertex 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: {
                vertex: {
                    radius: 8
                }
            }
        }
    }]
});
</script>

connections.editable.points.vertex.stroke

Object

The stroke options of the connection vertex 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: {
                vertex: {
                    stroke: {
                        color: "#000000",
                        width: 2
                    }
                }
            }
        }
    }]
});
</script>

Connections.editable.points.vertex

connections.editable.points.vertex

connections.editable.points.vertex.fill

connections.editable.points.vertex.radius

connections.editable.points.vertex.stroke

Related Members