New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

PDF, SVG and Image Export

US Open Men's Singles

Brackets

  • Demo Configurator
Export Diagram Content

Since Q1 2015 RadDiagram can be exported to three new formats:

  • Image
  • PDF
  • SVG

In order to utilize the data exporting functionality of the RadDiagram for ASP .NET AJAX, you will need to use one of the respective client-side methods of the diagram widget:

  • exportImage() - exports the full content of the diagram as an 1:1 scalded image.
  • exportPDF() - exports the diagram content as a PDF file. When exporting to PDF, you also use the saveAsPDF() method.
  • exportSVG() - exports the diagram content as an SVG document.

Known Limitations:
The exporting functionality does not work out of the box in IE version 9 and lower and Safari, because the mentioned browsers are not capable of saving files locally. You can use a proxy that streams the file to the end user in these scenarios, as explained in the documentation of the saveAs method.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.SaveLoad.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <div id="title-container">
            <h2>US Open Men's Singles</h2>
            <h3>Brackets</h3>
        </div>
        <telerik:RadDiagram ID="brackets" runat="server" Width="800" Height="480">
            <ClientEvents OnLoad="diagramLoad" />
            <PdfSettings FileName="diagram.pdf" Title="Diagram Exported to PDF" />
            <ShapeDefaultsSettings Width="140" Height="30">
                <StrokeSettings Color="#fff" />
            </ShapeDefaultsSettings>
            <ShapesCollection>
                <telerik:DiagramShape Id="nadal_winner">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="djokovic_quarterfinal">
                    <FillSettings Color="#8cb20f" />
                    <ContentSettings Text="N. Djokovic" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="youzhny_quarterfinal">
                    <FillSettings Color="#ae5e08" />
                    <ContentSettings Text="M. Youzhny" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="murray_quarterfinal">
                    <FillSettings Color="#d75234" />
                    <ContentSettings Text="A. Murry" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="wawrinka_quarterfinal">
                    <FillSettings Color="#f8c43a" />
                    <ContentSettings Text="S. Wawrinka" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="gasquet_quarterfinal">
                    <FillSettings Color="#5f9fee" />
                    <ContentSettings Text="R. Gasquet" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="ferrer_quarterfinal">
                    <FillSettings Color="#1958a6" />
                    <ContentSettings Text="D. Ferrer" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="robredo_quarterfinal">
                    <FillSettings Color="#6da000" />
                    <ContentSettings Text="T. Robredo" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="nadal_quarterfinal">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="djokovic_semifinal">
                    <FillSettings Color="#8cb20f" />
                    <ContentSettings Text="N. Djokovic" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="wawrinka_semifinal">
                    <FillSettings Color="#f8c43a" />
                    <ContentSettings Text="S. Wawrinka" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="gasquet_semifinal">
                    <FillSettings Color="#5f9fee" />
                    <ContentSettings Text="R. Gasquet" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="nadal_semifinal">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="djokovic_final">
                    <FillSettings Color="#8cb20f" />
                    <ContentSettings Text="N. Djokovic" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="nadal_final">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
            </ShapesCollection>
            <ConnectionsCollection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="djokovic_quarterfinal" />
                    <ToSettings ShapeId="djokovic_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="youzhny_quarterfinal" />
                    <ToSettings ShapeId="djokovic_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="murray_quarterfinal" />
                    <ToSettings ShapeId="wawrinka_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="wawrinka_quarterfinal" />
                    <ToSettings ShapeId="wawrinka_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="gasquet_quarterfinal" />
                    <ToSettings ShapeId="gasquet_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="ferrer_quarterfinal" />
                    <ToSettings ShapeId="gasquet_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="robredo_quarterfinal" />
                    <ToSettings ShapeId="nadal_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="nadal_quarterfinal" />
                    <ToSettings ShapeId="nadal_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="djokovic_semifinal" />
                    <ToSettings ShapeId="djokovic_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="wawrinka_semifinal" />
                    <ToSettings ShapeId="djokovic_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="gasquet_semifinal" />
                    <ToSettings ShapeId="nadal_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="nadal_semifinal" />
                    <ToSettings ShapeId="nadal_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="djokovic_final" />
                    <ToSettings ShapeId="nadal_winner" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="nadal_final" />
                    <ToSettings ShapeId="nadal_winner" />
                </telerik:DiagramConnection>
            </ConnectionsCollection>
        </telerik:RadDiagram>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View ID="View1" runat="server">
                <qsf:ConfiguratorColumn ID="column1" runat="server" Title="Export Diagram Content">
                    <qsf:Button ID="imgExportBtn" Text="Export as PNG" OnClientClicked="exportToImage" AutoPostBack="false" runat="server" CssClass="expotrBtns" />
                    <qsf:Button ID="pdfExportBtn" Text="Export as PDF" OnClientClicked="exportToPDF" AutoPostBack="false" runat="server" CssClass="expotrBtns" />
                    <qsf:Button ID="svgExportBtn" Text="Export as SVG" OnClientClicked="exportToSVG" AutoPostBack="false" runat="server" />
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance