edit

Fired when the user edits a shape or connection.

Event Data

e.container jQuery

The jQuery object representing the container element. That element contains the editing UI.

e.connection kendo.data.Model

The dataItem to which connection is bound.

e.shape kendo.data.Model

The dataItem to which shape is bound.

e.sender kendo.dataviz.ui.Diagram

The widget instance which fired the event.

Example - handling the edit event

<div id="diagram" style="height:600px;"></div>
<script>
  $("#diagram").kendoDiagram({
    dataSource: {
      data: [
        { id: 1, jobTitle: "President" },
        { id: 2, jobTitle: "VP Finance" }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            jobTitle: { type: "string" }
          }
        }
      }
    },
    connectionsDataSource: {
      data: [
        { id: 1, from: 1, to: 2 }
      ]
    },
    layout: {
      type: "tree",
      subtype: "tipover",
      underneathHorizontalOffset: 140
    },
    edit: onEdit
  });

  function onEdit(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Editing shape with model id: " + e.shape.id);
  }
</script>