Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy