Edit this page

connectionsDataSource Object |Array |kendo.data.DataSource

Defines the data source of the connections.

Example - settings 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>
        dataSource: [
            {id:"one", name:"One"},
            {id:"two", name:"Two"},
            {id:"five", name:"Five"},
            {from:"one", to:"two", label: "plus one"},
            {from:"one", to:"five", 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",
                template:"#= label#"

        autoBind: true
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article