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

BoundingBox

methods

Calculates and returns the bounding rectangle that encompasses the specified items. The method iterates through the given shapes and connections to determine the smallest rectangle that contains all of them.

boundingBox

Parameters:itemsArray

The items (shapes and connections) to include in the bounding box. Defaults to all items if not specified.

Returns:kendo.dataviz.diagram.Rect

The bounding rectangle of the specified items. If nothing is specified the bounding box of the all diagram will be returned.

<button id="btn">Get bounding box of 1st and 2nd shape</button>
<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      x: 100,
      y: 20
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      },
      x: 350,
      y: 20
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      },
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });

  $("#btn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    var shapes = diagram.shapes;
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(diagram.boundingBox([shapes[0], shapes[1]]));
  });
</script>