ClientExportManager - WYSIWYG Export


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Client Export Manager is exporting the DOM elements as they look like in the browser. Keep in mind that only the visible part of the content of a scrollable container will be exported. In case that you want to export the whole content you will need to export the inner container or to set 100% width and height of the container.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.ApplicationScenarios.Visual.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style>
        .scrollableContainer {
            height: 280px;
            overflow-y: scroll;
            overflow-x:hidden;
            background-color: white;
        }
    </style>
</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">
        <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportScrollableContainer" Text="Export Visible Area" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportContent" Text="Export Whole Content" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>

        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
        <br />
        <div class="scrollableContainer">
            <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="2" CssClass="MyMap">
                <CenterSettings Latitude="23" Longitude="10" />
                <LayersCollection>
                    <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                        UrlTemplate="http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                        Attribution="&copy; <a href='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                    </telerik:MapLayer>
                </LayersCollection>
                <MarkersCollection>
                    <telerik:MapMarker Shape="PinTarget" Title="Palo Alto">
                        <TooltipSettings Content="US - Palo Alto, CA"></TooltipSettings>
                        <LocationSettings Latitude="37.444610" Longitude="-122.163283" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="Boston">
                        <TooltipSettings Content="US - Boston, MA"></TooltipSettings>
                        <LocationSettings Latitude="42.375067" Longitude="-71.272233" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="Copenhagen">
                        <TooltipSettings Content="Denmark - Copenhagen"></TooltipSettings>
                        <LocationSettings Latitude="55.670312" Longitude="12.538266" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="Sydney">
                        <TooltipSettings Content="Australia - Sydney"></TooltipSettings>
                        <LocationSettings Latitude="-33.838707" Longitude="151.207959" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="Austin">
                        <TooltipSettings Content="US - Austin, TX"></TooltipSettings>
                        <LocationSettings Latitude="30.268162" Longitude="-97.744873" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="Sofia">
                        <TooltipSettings Content="Bulgaria - Sofia"></TooltipSettings>
                        <LocationSettings Latitude="42.650613" Longitude="23.379025" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="Gurgaon">
                        <TooltipSettings Content="India - Gurgaon"></TooltipSettings>
                        <LocationSettings Latitude="28.410139" Longitude="77.042439" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="London">
                        <TooltipSettings Content="UK - London"></TooltipSettings>
                        <LocationSettings Latitude="51.515986" Longitude="-0.085798" />
                    </telerik:MapMarker>

                    <telerik:MapMarker Shape="PinTarget" Title="Munich">
                        <TooltipSettings Content="Germany - Munich"></TooltipSettings>
                        <LocationSettings Latitude="48.117227" Longitude="11.601990" />
                    </telerik:MapMarker>
                </MarkersCollection>
            </telerik:RadMap>
        </div>

    </div>
    <script>
        var $ = $telerik.$;

        function exportScrollableContainer() {
            $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".scrollableContainer"));
        }

        function exportContent() {
            $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadMap"));
        }

    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?