Edit this page


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

  var diagramElement = $('<div id="diagram" />').kendoDiagram({
    shapes: [{
      id: "id1",
      type: "Rectangle",
      x: 0,
      y: 0,
      width: 100,
      height: 100
    add: function(e) {
      var addedShape = e.shape;
      // 'this' refers to the widget here


  var diagram = diagramElement.data('kendoDiagram');

  diagram.addShape(new kendo.dataviz.diagram.Shape({x:100, y:100, fill: "red"}))
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article