Back to all docs
API Reference / dataviz / ui / Diagram / editable
New to Kendo UI for jQuery? Start a free 30-day trial

Editable

configuration

A set of settings to configure the Diagram behavior when the user attempts to:

  • edit, delete or create shapes and connections.
  • drag shapes.
  • resize shapes.
  • rotate shapes.

editable

Boolean|Object

Default: true

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    editable: false,
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

editable.connectionTemplate

String|Function

Specifies the connection editor template which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.

<script id="popup-editor" type="text/x-kendo-template">
		<h3>Edit Connection Data</h3>
		<p>
        <label>From Shape: <input name="from" data-role="dropdownlist" data-bind="value: from" data-source="shapesDataSource" data-text-field="id" data-value-field="id" /></label>
  </p>
		<p>
        <label>To Shape: <input name="to" data-role="dropdownlist" data-bind="value: to" data-source="shapesDataSource" data-text-field="id" data-value-field="id" /></label>
  </p>
</script>

<div id="diagram"></div>
<script>
  var serviceRoot = "https://demos.telerik.com/service/v2/core";

  var shapesDataSource = {
    batch: false,
    transport: {
      read: {
        url: serviceRoot + "/DiagramShapes"
      },
      update: {
        url: serviceRoot + "/DiagramShapes/Update",
        type: "POST",
        contentType: "application/json"
      },
      destroy: {
        url: serviceRoot + "/DiagramShapes/Destroy",
        type: "POST",
        contentType: "application/json"
      },
      create: {
        url: serviceRoot + "/DiagramShapes/Create",
        type: "POST",
        contentType: "application/json"
      },
      parameterMap: function (options, operation) {
        if (operation !== "read") {
          return 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",
        type: "POST",
        contentType: "application/json"
      },
      update: {
        url: serviceRoot + "/DiagramConnections/Update",
        type: "POST",
        contentType: "application/json"
      },
      destroy: {
        url: serviceRoot + "/DiagramConnections/Destroy",
        type: "POST",
        contentType: "application/json"
      },
      create: {
        url: serviceRoot + "/DiagramConnections/Create",
        type: "POST",
        contentType: "application/json"
      },
      parameterMap: function (options, operation) {
        if (operation !== "read") {
          return 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({
    layout: {
      type: "layered"
    },
    dataSource: shapesDataSource,
    connectionsDataSource: connectionsDataSource,
    editable: {
      tools: ["edit"],
      connectionTemplate: kendo.template($("#popup-editor").html())
    },
    connectionDefaults: {
      editable: {
        tools: ["edit"]
      }
    },
    dataBound: onDataBound
  });
</script>

editable.drag

Boolean|Object

Specifies if the shapes and connections can be dragged.

Default: true

<div id="diagram"></div>
<script>
  var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
      "name": "Progress",
      "items": [
        {"name": "Kendo UI",
         "items":[
           {"name": "TreeList"},
           {"name": "Chart"}
         ]
        },
        {"name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    editable: {
      drag: false
    },
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  });
</script>

editable.remove

Boolean

Specifies if the shapes and connections can be removed.

Default: true

<div id="diagram"></div>
<script>
  var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
      "name": "Progress",
      "items": [
        {"name": "Kendo UI",
         "items":[
           {"name": "TreeList"},
           {"name": "Chart"}
         ]
        },
        {"name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    editable: {
      remove: false
    },
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  });
</script>

editable.resize

Boolean|Object

Defines the look-and-feel of the shape resizing handles.

Default: true

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    }],
    editable: {
      resize: {
        handles: {
          fill: {
            color: "red",
            opacity: 0.5
          },
          height: 10,
          width: 10,
          stroke: {
            color:"blue",
            width:1,
            dashType:"dot"
          },
          hover: {
            fill: {
              color:"green",
              opcaity:.8
            },
            stroke: {
              color:"purple",
              width:5
            }
          }
        }
      }
    }
  });
</script>

editable.rotate

Boolean|Object

Specifies whether the shapes can be rotated. Note that changing this setting after creating the diagram will have no effect.

Default: true

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    editable: {
        rotate: true
    },
    shapes: [
        {
            id: "1",
            content: {
                text: "Rotatable Shape"
            },
            x: 100,
            y: 100
        }
    ]
});
</script>

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.

<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/service/v2/core";

    var shapesDataSource = {
      batch: false,
      transport: {
        read: {
          url: serviceRoot + "/DiagramShapes"
        },
        update: {
          url: serviceRoot + "/DiagramShapes/Update",
          type: "POST",
          contentType: "application/json"
        },
        destroy: {
          url: serviceRoot + "/DiagramShapes/Destroy",
          type: "POST",
          contentType: "application/json"
        },
        create: {
          url: serviceRoot + "/DiagramShapes/Create",
          type: "POST",
          contentType: "application/json"
        },
        parameterMap: function (options, operation) {
          if (operation !== "read") {
            return 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"
        },
        update: {
          url: serviceRoot + "/DiagramConnections/Update",
          type: "POST",
          contentType: "application/json"
        },
        destroy: {
          url: serviceRoot + "/DiagramConnections/Destroy",
          type: "POST",
          contentType: "application/json"
        },
        create: {
          url: serviceRoot + "/DiagramConnections/Create",
          type: "POST",
          contentType: "application/json"
        },
        parameterMap: function (options, operation) {
          if (operation !== "read") {
            return 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>

editable.tools

Array

Specifies the toolbar tools. Supports all options supported by the toolbar.items property. Predefined tools are:

  • "edit" - The selected item can be edited.
  • "createShape" - Adds an empty shape data item and a popup window is displayed.
  • "createConnection" - Adds an empty connection data item and a popup window is displayed.
  • "undo" - Undoes the previous action.
  • "redo" - Executes again the previously undone action.
  • "rotateClockwise" - The selected items can be rotated clockwise. The default rotation value is 90 degree.
  • "rotateAnticlockwise" - The selected items can be rotated anticlockwise. The default rotation value is 90 degree.

If the toolbar or toolbar items are not visible, verify that the Kendo UI stylesheets are included in the header.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    }],
    editable: {
      tools: [{
        name: "delete"
      }, {
        name: "rotateClockwise",
        step: 45
      }, {
        name: "rotateAnticlockwise",
        step: 45
      }]
    }
  });
</script>
<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    }],
    editable: {
      tools: [{
        type: "button",
        text: "Set Selected Content",
        click: function() {
          var selected = $("#diagram").getKendoDiagram().select();
          var content = $("#content").val();
          for (var idx = 0; idx < selected.length; idx++) {
            selected[idx].content(content);
          }
        }
      }, {
        template: "<input id='content' class='k-textbox' value='Foo' />"
      }]
    }
  });
</script>

Related Members

  • editable.drag - Specifies if the shapes and connections can be dragged.
  • editable.drag.snap - Specifies the shapes drag snap options. By default, during dragging, the shapes move by a given number of pixels at once. You can disable this behavior to make shapes movement smooth or you can specify a different number for the drag snap size to simulate a snap-to-grid functionality.
  • editable.resize - Defines the look-and-feel of the shape resizing handles.
  • editable.resize.handles - Specifies the settings of the resizing handles. See the editable.resize configuration for an example.
  • editable.resize.handles.fill - Specifies the fill settings of the resizing handles. See the editable.resize configuration for an example.
  • editable.resize.handles.hover - Specifies the settings of the resizing handles on hovering over them. See the editable.resize configuration for an example.
  • editable.resize.handles.hover.fill - Specifies the fill settings on hovering over the resizing handles. See the editable.resize configuration for an example.
  • editable.resize.handles.hover.stroke - Specifies the stroke on hovering over the resizing handles. See the editable.resize configuration for an example.
  • editable.resize.handles.stroke - Specifies the stroke of the resizing handles. See the editable.resize configuration for an example.
  • editable.rotate - Specifies whether the shapes can be rotated. Note that changing this setting after creating the diagram will have no effect.
  • editable.rotate.fill - Specifies the fill settings of the rotation thumb.
  • editable.rotate.stroke - Specifies the stroke settings of the rotation thumb.
  • editable.tools - Specifies the toolbar tools. Supports all options supported by the toolbar.items property. Predefined tools are:
In this article
editableeditable.connectionTemplateeditable.drageditable.removeeditable.resizeeditable.rotateeditable.shapeTemplateeditable.tools
Not finding the help you need?
Contact Support