Scale Diagram to Fit Container upon Resizing
Environment
| Product | Progress® Kendo UI® Diagram for jQuery |
Description
How can I scale Kendo UI Diagram to fit its container upon resizing?
Solution
Create a method to dynamically calculate the Diagram viewport dimensions and scale the Diagram accordingly. Use the zoom() method of the Diagram.
<div class="diagram-wrapper">
<div id="diagram"></div>
</div>
<script>
$("#diagram").kendoDiagram({
shapes:[
{
id:"1",
content:{
text: "State 1"
},
x: 20,
y: 20
},
{
id:"2",
content: {
text: "State 2"
},
x: 650,
y: 20
}
],
connections:[
{
from: "1",
to: "2"
}
]
});
function ResizeDiagram() {
var diagram = $("#diagram").data("kendoDiagram"); //get instance of the Diagram
var boundingbox = diagram.boundingBox();
var viewport = diagram.viewport();
var vpW = viewport.width; //get Diagram viewport width
var vpH = viewport.height; //get Diagram viewport height
var bbW = boundingbox.width; //get Diagram boundingbox width
var bbH = boundingbox.height; //get Diagram boundingbox height
var ratioW = vpW / bbW;
var ratioH = vpH / bbH;
//zoom Diagram based on width ratio and height ratio
if (ratioW < ratioH) {
diagram.zoom(ratioW * .95);
}
else {
diagram.zoom(ratioH * .95);
}
}
$(window).on("resize", function () {
ResizeDiagram();
});
</script>