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>In this article