Edit this page

editable.connectionTemplate String |Function

Specifies the connection editor template which shows up when editing the connection via a pop-up editor much like 'editable.template' configuration of the Kendo UI Grid widget.

Example - setting the connectionTemplate

Assuming that the diagram is data bound and that the connection data contains properties 'meaning' and 'domain'. These can be edited by setting a Kendo template and a diagram configuration as follows.

<script id="popup-editor" type="text/x-kendo-template">
<h3>Edit Connection Data</h3>
<p>
    <label>Semantic meaning:<input name="meaning" /></label>
  </p>
<p>
    <label>Domain: <input data-role="domain" name="domain" /></label>
  </p>
</script>

<div id="diagram"></div>
<script>
  var serviceRoot = "https://demos.telerik.com/kendo-ui/service";

  var shapesDataSource = {
    batch: false,
    transport: {
      read: {
        url: serviceRoot + "/DiagramShapes",
        dataType: "jsonp"
      },
      update: {
        url: serviceRoot + "/DiagramShapes/Update",
        dataType: "jsonp"
      },
      destroy: {
        url: serviceRoot + "/DiagramShapes/Destroy",
        dataType: "jsonp"
      },
      create: {
        url: serviceRoot + "/DiagramShapes/Create",
        dataType: "jsonp"
      },
      parameterMap: function (options, operation) {
        if (operation !== "read") {
          return { models: kendo.stringify(options.models || [options]) };
        }
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number", editable: false },
          JobTitle: { type: "string" },
          Color: { type: "string" }
        }
      }
    }
  };

  var connectionsDataSource = {
    batch: false,
    transport: {
      read: {
        url: serviceRoot + "/DiagramConnections",
        dataType: "jsonp"
      },
      update: {
        url: serviceRoot + "/DiagramConnections/Update",
        dataType: "jsonp"
      },
      destroy: {
        url: serviceRoot + "/DiagramConnections/Destroy",
        dataType: "jsonp"
      },
      create: {
        url: serviceRoot + "/DiagramConnections/Create",
        dataType: "jsonp"
      },
      parameterMap: function (options, operation) {
        if (operation !== "read") {
          return { models: kendo.stringify(options.models || [options]) };
        }
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "Id", type: "number", editable: false },
          from: { from: "FromShapeId", type: "number" },
          to: { from: "ToShapeId", type: "number" },
          fromX: { from: "FromPointX", type: "number" },
          fromY: { from: "FromPointY", type: "number" },
          toX: { from: "ToPointX", type: "number" },
          toY: { from: "ToPointY", type: "number" }
        }
      }
    }
  };

  function onDataBound(e) {
    var that = this;
    setTimeout(function () {
      that.bringIntoView(that.shapes);
    }, 0);
  }

  $("#diagram").kendoDiagram({
    readOnly: false,
    dataSource: shapesDataSource,
    connectionsDataSource: connectionsDataSource,
    editable: {
      tools: ["edit"],
      connectionTemplate: kendo.template($("#popup-editor").html())
    },
    connectionDefaults: {
      editable: {
        tools: ["edit"]
      }
    },
    dataBound: onDataBound
  });
</script>

See also the Kendo data-bound sample for a similar example.

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

Give article feedback

Tell us how we can improve this article

close
Dummy