dataSource kendo.data.DataSource

Returns the shapes DataSource if such is assigned to the Diagram.

Example - updating a value of an item in the shapes DataSource

<button id="updateBtn">Update shape</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#"
      }
    }
  });

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

    diagram.dataSource.at(0).set("name", "ONE");
  });
</script>
In this article
Not finding the help you need?