AUTHOR: Marin Bratanov
DATE POSTED: October 03, 2018
Fit all diagram items in the viewport so the user sees them, regardless of their count and position.
While you can empirically find dimensions you can set to the diagram so all items (shapes and connections) can be seen, this is not ideal, especially when you have a dynamically generated diagram - you can't know what size will be enough and also not too much. In other words, I would rather have RadDiagram to adjust its width and height to fit without clipping.
You can
Here is an example with the key points hightlighted:
<script>
function
fitDiagram(sender, args) {
var
kDiag = sender.get_kendoWidget();
kDiag.bringIntoView(kDiag.boundingBox());
}
</script>
<div style=
"width: 200px; height: 200px; border: 2px solid red; overflow: auto;"
>
<telerik:RadDiagram runat=
"server"
ID=
"RadDiagram1"
ZoomRate=
"0"
<ClientEvents OnLoad="fitDiagram" />
<PannableSettings Key=
"None"
/>
<ShapesCollection>
<telerik:DiagramShape Id=
"DiagramShape1"
Width=
"100"
Height=
"70"
X=
"260"
Y=
Type=
"rectangle"
<ContentSettings Text=
"Parent"
<FillSettings Color=
"#25a0da"
</telerik:DiagramShape>
"DiagramShape2"
"60"
"250"
"circle"
"Child 1"
"#FFBE33"
"DiagramShape3"
"245"
"Child 2"
"DiagramShape4"
"440"
"Child 3"
</ShapesCollection>
<ConnectionsCollection>
<telerik:DiagramConnection StartCap=
"FilledCircle"
EndCap=
"ArrowEnd"
<FromSettings Connector=
"Bottom"
ShapeId=
<ToSettings Connector=
"Top"
</telerik:DiagramConnection>
</ConnectionsCollection>
</telerik:RadDiagram>
</div>
Resources Buy Try