connectionsDataSource Object|Array|kendo.data.DataSource

Defines the data source of the connections.

Example - setting the connectionsDataSource and dynamic labelling

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>
In this article
Not finding the help you need? Improve this article