save

Fired when the user saves a shape or a 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 save 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 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            from: { type: "number" },
            to: { type: "number" }
          }
        }
      }
    },
    layout: {
      type: "tree",
      subtype: "tipover",
      underneathHorizontalOffset: 140
    },
    shapeDefaults: {
      content: {
        template: "#: jobTitle #"
      }
    },
    save: onSave
  });

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