Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy