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

ConnectionsDataSource

configuration

Defines the data source of the connections.

connectionsDataSource

Object|Array|kendo.data.DataSource

Note that the 'from' and 'to' fields in the connectionsDataSource refer to the 'id' of the dataSource. The label on the connection is set via the connectionsDefaults.content.template.

<div id="diagram"></div>
<script>
 $("#diagram").kendoDiagram({
        dataSource: [
            {id:"one", name:"One"},
            {id:"two", name:"Two"},
            {id:"four", name:"Four"},
        ],
        connectionsDataSource:[
            {from:"one", to:"two", label: "plus one"},
            {from:"one", to:"four", label: "plus three"}
        ],
        layout: {
            type: "tree",
            subtype: "right"
        },
        shapeDefaults: {
            type: "circle",
            content: {
                template: "#= name #"
            },
            width: 70,
            height: 70,
            hover: {
                fill: "Orange"
            }
        },
        connectionDefaults: {
            stroke: {
                color: "#979797",
                width: 1
            },
            type: "polyline",
            startCap: "FilledCircle",
            endCap: "ArrowEnd",
            content:{
                template:"#= label#"
            }
        }
    });
</script>