This is a migrated thread and some comments may be shown as answers.

Automatic Zoom

1 Answer 107 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Dean asked on 05 Jun 2017, 02:06 PM

Hello!

I'm trying to implement a way to automatically resize the diagram to fit the canvas (i.e. automatic zoom) after it is loaded. But I could not find a built-in functionality. Is this possible?

 

Best Regards,

1 Answer, 1 is accepted

Sort by
1
Vessy
Telerik team
answered on 05 Jun 2017, 03:38 PM
Hi David,

The described scenario can be achieved by calling the bringIntoView() method of the diagram in its client-side Load event-handler. 

You can see how to access the Kendo widget of the Diagram here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/client-side-programming/overview

For example:
<telerik:RadDiagram BackColor="#f2f2f2" ID="ModelDiagram" Skin="Metro" runat="server">
    <ClientEvents OnLoad="diagramLoad" />
    <ShapesCollection>
        <telerik:DiagramShape Id="s1" X="150" Y="50" Fill="orange" Width="300">
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="s2" X="250" Y="350"></telerik:DiagramShape>
    </ShapesCollection>
    <ConnectionsCollection>
        <telerik:DiagramConnection>
            <FromSettings ShapeId="s1" />
            <ToSettings ShapeId="s2" />
        </telerik:DiagramConnection>
    </ConnectionsCollection>
</telerik:RadDiagram>
<script>
    function diagramLoad(diagram, load) {
        var diagramWidget = diagram.get_kendoWidget();
        diagramWidget.bringIntoView(diagramWidget.shapes);
    }
</script>


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram
Asked by
Dean
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or