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

DocumentToView

methods

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

documentToView

Parameters:pointObject

The point in Page document coordinates.

Returns:Object

the transformed point

<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 });
/* The result can be observed in the DevTools(F12) console of the browser. */
          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>