bringIntoView

Brings one or more items into the view in function of various criteria.

Parameters

obj Array|Object

• a diagram item
• an array of items
• a rectangle: this defines a window which the view should contain

options Object

• animate
• align

Example - bring a portion of the diagram into view

This will offset/pan the diagram to bring the rectangle at position (500,500) into view.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape1 = diagram.addShape(new Shape({x:100, y:100, fill: "red"}));
  var shape2 = diagram.addShape(new Shape({x:400, y:100, fill: "red"}));
  var con = diagram.connect(shape1,shape2);

  setTimeout(function(){
    diagram.bringIntoView(new kendo.dataviz.diagram.Rect({height:500, width:500, x:10, y:10}));
  }, 2000)
</script>

Example - bring an item into view

The second shape has a vertical position of 1000 and is off the screen at launch. Upon clicking the diagram this item will be in the view.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  var shape2;
  var diagram;

  function init()
  {
    var diagramElement = $("#diagram").kendoDiagram();
    diagram = diagramElement.data("kendoDiagram");
    diagramElement.css("width", "1200");
    diagramElement.css("height", "800");
  }
  $(document).ready(
    function()
    {
      init();
      var shape1 = diagram.addShape(new Shape({x:100, y:100, fill: "red"}));
      shape2 = diagram.addShape(new Shape({x:400, y:1000, fill: "red"}));
      var con = diagram.connect(shape1, shape2);
    });
  $(document).click(function()
                    {
    diagram.bringIntoView(shape2);
  });
</script>