New to Kendo UI for jQuery? Start a free 30-day trial

Edit

events

Fired when the user edits a shape or connection.

edit

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.

<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>

Edit

edit

Event Data

e.container jQuery

e.connection kendo.data.Model

e.shape kendo.data.Model

e.sender kendo.dataviz.ui.Diagram

e.container `jQuery`

e.connection `kendo.data.Model`

e.shape `kendo.data.Model`

e.sender `kendo.dataviz.ui.Diagram`