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