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

Export HTML Elements


 ProductIDProductNameSupplierIDCategoryIDQuantityPerUnitUnitPriceUnitsInStockUnitsOnOrderReorderLevelCategoryName
34Sasquatch Ale16124 - 12 oz bottles14.00111015Beverages
35Steeleye Stout16124 - 12 oz bottles18.0020015Beverages
38Côte de Blaye18112 - 75 cl bottles263.5017015Beverages
39Chartreuse verte181750 cc per bottle18.006905Beverages
43Ipoh Coffee20116 - 500 g tins46.00171025Beverages
67Laughing Lumberjack Lager16124 - 12 oz bottles14.0052010Beverages
70Outback Lager7124 - 355 ml bottles15.00151030Beverages
75Rhönbräu Klosterbier12124 - 0.5 l bottles7.75125025Beverages
76Lakkalikööri231500 ml18.0057020Beverages
15Genen Shouyu6224 - 250 ml bottles15.503905Condiments

The Client Export Manager for ASP.NET AJAX enables you to export specific HTML elements from sites and apps to image, PDF and SVG in a WYSIWYG manner.

The demo shows how to export a HTML element on the page. Since a custom font is used in the first GridView column, you can export it to a PDF file by declaring it in the Fonts collection of the RadClientExportManager PDF settings.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.Functionality.HtmlElement.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>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf" rel="stylesheet" />
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="../../../Common/Scripts/pako.min.js"></script>
    <style type="text/css">
        .kendo-pdf-hide-pseudo-elements:after,
        .kendo-pdf-hide-pseudo-elements:before {
            display: none !important;
        }

        .MyGridView th,
        .MyGridView td {
            padding: 5px !important;
            border: 1px solid black;
        }
    </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">
        <telerik:RadButton RenderMode="Lightweight" runat="server" Skin="Silk" OnClientClicked="exportPDF" Text="Export element to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" runat="server" Skin="Silk" OnClientClicked="exportImage" Text="Export element to Image" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
        <br />

        <asp:GridView runat="server" Width="100%" ID="GridView1" CssClass="MyGridView" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <i class="fa fa-thumbs-up"></i>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 10 ProductID, ProductName, SupplierID, CategoryID, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, CategoryName  FROM [Alphabetical list of products]"></asp:SqlDataSource>
    </div>
    <script>
        var $ = $telerik.$;

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

        function exportImage() {
            $find('<%=RadClientExportManager1.ClientID%>').exportImage($(".MyGridView"));
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance