editable.shapeTemplate String|Function

Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.

Example - customizing the shape editing UI

<div id="diagram"></div>

<script id="popup-editor" type="text/x-kendo-template">
      <h3>Edit Shape Data</h3>
      <p>
        <label>Job title: <input name="JobTitle" data-role="dropdownlist" data-bind="value: JobTitle" data-source="titles" data-text-field="JobTitle" data-value-field="JobTitle" /></label>
  </p>
</script>
<script>
  function onDataBound(e) {
    var that = this;
    setTimeout(function () {
      that.bringIntoView(that.shapes);
    }, 0);
  }

  function createDiagram() {
    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" }
          }
        }
      }
    };

    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" }
          }
        }
      }
    };

    $("#diagram").kendoDiagram({
      dataSource: shapesDataSource,
      connectionsDataSource: connectionsDataSource,
      editable: {
        shapeTemplate: kendo.template($("#popup-editor").html())
      },
      layout: {
        type: "layered"
      },
      shapeDefaults: {
        content: {
          template: "#= dataItem.JobTitle #",
          fontSize: 17
        },
        width: 220
      },
      connectionDefaults: {
        stroke: {
          color: "#586477",
          width: 2
        }
      },
      dataBound: onDataBound
    });
  }
  var titles = [{JobTitle: "Relations Manager"},
                {JobTitle: "Accountant"},
                {JobTitle: "Budget Analyst"},
                {JobTitle: "Technical Support Manager"},
                {JobTitle: "Compensation Manager"},
                {JobTitle: "Payrol Specialist"},
                {JobTitle: "VP Finance"},
                {JobTitle: "VP Human Resources"},
                {JobTitle: "VP Customer Relations"},
                {JobTitle: "President"},];
  $(document).ready(createDiagram);
</script>