New to Kendo UI for jQuery? Start a free 30-day trial

SetConnectionsDataSource

methods

Sets the connections data source of the diagram.

setConnectionsDataSource

Parameters:dataSourcekendo.data.DataSource

The data source to which the widget should be bound.

<button id="dsBtn">Set dataSource</button>
<button id="connDsBtn">Set connectionDataSource</button>
<div id="diagram"></div>
<script>
  $("#dsBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    diagram.setDataSource(shapesDataSource);
  });
  $("#connDsBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    diagram.setConnectionsDataSource(connectionsDataSource);
  });
  var serviceRoot = "https://demos.telerik.com/service/v2/core";

  var shapesDataSource = {
    transport: {
      read: {
        url: serviceRoot + "/DiagramShapes"
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number", editable: false }
        }
      }
    }
  };

  var connectionsDataSource = {
    transport: {
      read: {
        url: serviceRoot + "/DiagramConnections"
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number", editable: false },
          from: { from: "FromShapeId", type: "number" },
          to: { from: "ToShapeId", type: "number" }
        }
      }
    }
  };

  $("#diagram").kendoDiagram({
    layout: {
      type: "layered"
    }
  });
</script>