documentToView

Transforms a point from Page document coordinates to View coordinates. View coordinates are relative to the currently visible portion of the Diagram.

Parameters

point Object

The point in Page document coordinates.

Returns

Object the transformed point

Example - get point position in the visible portion of the Diagram

<script>
  $(function () {

    $("#splitter").kendoSplitter({
      panes: [
        { size: "200px" },
        {  }
      ]
    });

    var diagram = $("#diagram").kendoDiagram({
      dataSource: {
        data: [{
          items: [{}, {}]
        }],
        schema: {
          model: {
            children: "items"
          }
        }
      },
      shapeDefaults: {
        width: 120,
        height: 120,
        fill: "#8ebc00"
      },
      layout: {
        type: "tree"
      }
    }).getKendoDiagram();

    $("#shapes").kendoDraggable({
      filter: ".shapeItem",
      hint: function (element) {
        return element.clone();
      }
    });

    $("#diagram").kendoDropTarget({
      drop: function (e) {
        if (e.draggable.hint) {
          var position = diagram.documentToView({ x: e.pageX, y: e.pageY });
          console.log("Dropped element at visible position: " + position);
        }
      }
    });
  });
</script>
<div id="splitter">
  <div id="left-pane">
    <div class="pane-content">
      Drag square to Diagram:
      <div id="shapes">
        <span class="shapeItem" data-shape='{"width":120,"height":120,"type":"rectangle"}' style="background-position: 0 0"></span>
      </div>
    </div>
  </div>
  <div>
    <div class="pane-content">
      <div id="diagram"></div>
    </div>
  </div>
</div>

<style>
  html, body, #splitter
  {
    height: 100%;
  }

  .shapeItem
  {
    margin-top: 10px;
    display: inline-block;
    width: 120px;
    height: 120px;
    background-image: url("https://demos.telerik.com/kendo-ui/content/integration/diagram/images/diagram-toolbox.png");
    background-size: auto 100%;
  }
</style>
In this article
Not finding the help you need? Improve this article