Edit this page

Use Custom Edit Form in Diagram

Environment

Product Progress Kendo UI Diagram

Description

How can I implement custom UI for editing the Diagram shapes?

Solution

  1. Set the editable.shapeTemplate property of the Diagram.
  2. In the edit form template, use MVVM bindings to automatically apply user modifications in the edited shape data item.

You can utilize the same approach to customize the connection edit form through the editable.connectionTemplate property.

The following example demonstrates how to define a shapeTemplate to display a DropDownList and a ColorPicker when editing the shape values of the Diagram.

        <div id="diagram" style="height:600px;"></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>
          <p>
            <label>Color: <input name="Color" data-role="colorpicker" data-bind="value: Color" /></label>
          </p>
        </script>
        <script>
          function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;

            if (dataItem.JobTitle === "President") {
              g.append(new dataviz.diagram.Circle({
                radius: 60,
                stroke: {
                  width: 2,
                  color: dataItem.Color || "#586477"
                },
                fill: "#e8eff7"
              }));
            } else {
              g.append(new dataviz.diagram.Rectangle({
                width: 240,
                height: 67,
                stroke: {
                  width: 0
                },
                fill: "#e8eff7"
              }));

              g.append(new dataviz.diagram.Rectangle({
                width: 8,
                height: 67,
                fill: dataItem.Color,
                stroke: {
                  width: 0
                }
              }));
            }

            return g;
          }

          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" },
                    Color: { type: "string", defaultValue: "#fff",
                            parse: function(val){
                                    return val== "" ? "#fff" : val;
                                                        }
                           }
                  }
                }
              }
            };

            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: {
                visual: visualTemplate,
                content: {
                  template: "#= dataItem.JobTitle #",
                  fontSize: 17
                }
              },
              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