dataItem Object

The data item, if any, for the connection.

Example - configuring the dataItem

<button id="getConnInfo">Get 1st Connection Label</button>
<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: {
      data: [
        {id: 1, name:"One"},
        {id: 2, name:"Two"},
        {id: 3, name:"Four"},
      ],
      schema: {
        model: {
          id: "id"
        }
      }
    },
    connectionsDataSource:[
      {from: 1, to: 2, label: "plus one"},
      {from: 2, to: 3, 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#"
      }
    }
  });

  $("#getConnInfo").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();

    var dataItem = diagram.connections[0].dataItem;
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("First connection text: " + dataItem.label);
  });
</script>
In this article