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

GetPosition

methods

Returns the middle positions of the sides of the bounds or the center of the shape's bounds. This method is useful when defining custom connectors where a position function relative to the shape's coordinate system is required.

getPosition

Parameters:sideString

One of the four sides of a bound; "left", "right", "top", "bottom". If none specified the center of the shape's bounds will be returned.

<div id="diagram"></div>
<script>
  var shapesDataSource = {
    data: [
      { id: 1, JobTitle: "Job 1", Color: "red" },
      { id: 2, JobTitle: "Job 2", Color: "blue" },
      { id: 3, JobTitle: "Job 3", Color: "green" }
    ]
  };

  var connectionsDataSource = {
    data: [
      { id: 1, from: 1, to: 2},
      { id: 2, from: 1, to: 3},
    ]
  };

  var diagram = $("#diagram").kendoDiagram({
    dataSource: shapesDataSource,
    connectionsDataSource: connectionsDataSource,
    layout: {
      type: "tree"
    },
    shapeDefaults: {
      content: {
        template: "#= dataItem.JobTitle #"
      }
    }
  }).getKendoDiagram();

  var position = diagram.shapes[0].getPosition("top");
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(position);
</script>