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

Export HTML Elements


 ProductIDProductNameSupplierIDCategoryIDQuantityPerUnitUnitPriceUnitsInStockUnitsOnOrderReorderLevelCategoryName
1Chai1110 boxes x 20 bags18.0039010Beverages
2Chang1124 - 12 oz bottles19.00174025Beverages
3Aniseed Syrup1212 - 550 ml bottles10.00137025Condiments
4Chef Anton's Cajun Seasoning2248 - 6 oz jars22.005300Condiments
6Grandma's Boysenberry Spread3212 - 8 oz jars25.00120025Condiments
7Uncle Bob's Organic Dried Pears3712 - 1 lb pkgs.30.0015010Produce
8Northwoods Cranberry Sauce3212 - 12 oz jars40.00600Condiments
10Ikura4812 - 200 ml jars31.003100Seafood
11Queso Cabrales541 kg pkg.21.00223030Dairy Products
12Queso Manchego La Pastora5410 - 500 g pkgs.38.008600Dairy Products

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="ClientExportManager.Functionality.HtmlElement.DefaultVB"Language="vb"  %>

<%@ 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