itemBoundsChange

Fired when the location or size of a shape are changed.

Event Data

e.bounds kendo.dataviz.diagram.Rect

The new item bounds.

e.item kendo.dataviz.diagram.Shape

The affected shape.

e.sender kendo.dataviz.ui.Diagram

The widget instance which fired the event.

Example - handling itemBoundsChange 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
    },
    itemBoundsChange: onItemBoundsChange
  });

  function onItemBoundsChange(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("New item bounds (x, y, width, height): " + e.bounds);
  }
</script>