add

Fired when the user adds new shape or connection.

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.connection kendo.dataviz.diagram.Connection

The connection that will be added.

e.shape kendo.dataviz.diagram.Shape

The shape that will be added.

e.preventDefault Function

Prevents the add action. If called, the element will not be added to the diagram.

e.sender kendo.dataviz.ui.Diagram

The widget instance which fired the event.

Example - handling the add 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
      },
      add: onAdd
    });

    function onAdd(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log(e.shape.id);
    }
  </script>