Edit this page

Export to Image

You can export RadDiagram as an image on the client. This is done in two simple steps (Example 1):

  1. Get a reference to the client-side object of the underlying Kendo UI diagram as described in the Overview help article.

  2. Call the exportImage method of the client-side object of the diagram.

caution

The export to image functionality is currently supported in Firefox, Chrome, IE10+ and Opera 15.0+ (Blink).

Example 1: Export a diagram as an image.

<telerik:RadDiagram ID="RadDiagram1" runat="server">
    <LayoutSettings Type="Tree" Subtype="Down" Enabled="true">
    </LayoutSettings>
    <ClientEvents OnLoad="onLoad" />
    <ShapesCollection>
        <telerik:DiagramShape Id="DiagramShape1"></telerik:DiagramShape>
        <telerik:DiagramShape Id="DiagramShape2"></telerik:DiagramShape>
    </ShapesCollection>
    <ConnectionsCollection>
        <telerik:DiagramConnection>
            <FromSettings Connector="Top" ShapeId="DiagramShape1" />
            <ToSettings Connector="Bottom" ShapeId="DiagramShape2" />
            <StrokeSettings />
        </telerik:DiagramConnection>
    </ConnectionsCollection>
</telerik:RadDiagram>
<script type="text/javascript">
    function onLoad(diagram) {
        var diagramWidget = diagram.get_kendoWidget();
        diagramWidget.exportImage().done(function (data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "diagram.png"
            });
        });
    }
</script>

You can find a list of the available parameters of the exportImage method in the Kendo UI Diagram API Reference.

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy