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

WYSIWYG Export


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>
<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="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                        Attribution="&copy; <a href='https://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