Overview

Feb
23
Saturday

Hard Rock Festival

Sofia, Bulgaria

National Stadium

€250 - Sector A
Apr
18
Friday

Classical music

London, UK

Hall of Music

€250 - Sector A
May
12
Monday

Smooth Jazz

Boston, USA

Secret Garden Club

€250 - Sector A
Aug
26
Saturday

Contemporary R&B

Copenhagen, Denmark

Energy Dance Center

€250 - Sector A

Please, export and print your ticket

telerik ninja image
New to Telerik UI for ASP.NET AJAX?

Telerik UI for ASP.NET AJAX is professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

This demo showcases how you can use Telerik Client Export Manager for ASP.NET AJAX to enable users to save files by exporting them to PDF.

About RadClientExportManager for ASP.NET AJAX

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

RadClientExportManager and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Export of pages or specific HTML elements in a WYSIWYG manner
  • Supported export formats: Image, PDF, SVG
  • Option to save the exported files

More about RadClientExportManager for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.Overview.DefaultCS"Language="c#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="scripts.js" type="text/javascript"></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">
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

        <telerik:RadClientExportManager ID="RadClientExportManager1" runat="server" OnClientPdfExported="onClientPdfExported">
            <PdfSettings FileName="Ticket.pdf" />
        </telerik:RadClientExportManager>

        <img class="header" src="images/top.png" alt="" />

        <telerik:RadWizard RenderMode="Lightweight" runat="server" ID="RadWizard1" DisplayProgressBar="false" OnClientButtonClicking="onClientButtonClicking" DisplayNavigationBar="false" Height="470px">
            <WizardSteps>
                <telerik:RadWizardStep>
                    <div class="billingInfo">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnToggle" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton" Checked="true" Text="Use my billing information" Enabled="false"></telerik:RadButton>
                    </div>
                    <div class="concerts">
                        <div class="concertInfo selected">
                            <div class="ticketDate">
                                <div class="month">Feb</div>
                                <div class="day">23</div>
                                <div class="weekDay">Saturday</div>
                            </div>
                            <div class="ticketPlace">
                                <h3 class="concertName" data-value="rock">Hard Rock Festival</h3>
                                <p class="country">Sofia, Bulgaria</p>
                                <p class="location">National Stadium</p>
                            </div>
                            <div class="ticketOrder">
                                <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList1" Width="200px">
                                    <Items>
                                        <telerik:DropDownListItem Text="€250 - Sector A" Value="250,Sector A" />
                                        <telerik:DropDownListItem Text="€180 - Sector B" Value="180,Sector B" />
                                        <telerik:DropDownListItem Text="€120 - Sector C" Value="120,Sector C" />
                                        <telerik:DropDownListItem Text="€500 - VIP" Value="500,VIP" />
                                    </Items>
                                </telerik:RadDropDownList>
                            </div>
                        </div>
                        <div class="concertInfo">
                            <div class="ticketDate">
                                <div class="month">Apr</div>
                                <div class="day">18</div>
                                <div class="weekDay">Friday</div>
                            </div>
                            <div class="ticketPlace">
                                <h3 class="concertName" data-value="classic">Classical music</h3>
                                <p class="country">London, UK</p>
                                <p class="location">Hall of Music</p>
                            </div>
                            <div class="ticketOrder">
                                <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList2" Width="200px">
                                    <Items>
                                        <telerik:DropDownListItem Text="€250 - Sector A" Value="250,Sector A" />
                                        <telerik:DropDownListItem Text="€180 - Sector B" Value="180,Sector B" />
                                        <telerik:DropDownListItem Text="€120 - Sector C" Value="120,Sector C" />
                                        <telerik:DropDownListItem Text="€500 - VIP" Value="500,VIP" />
                                    </Items>
                                </telerik:RadDropDownList>
                            </div>
                        </div>
                        <div class="concertInfo">
                            <div class="ticketDate">
                                <div class="month">May</div>
                                <div class="day">12</div>
                                <div class="weekDay">Monday</div>
                            </div>
                            <div class="ticketPlace">
                                <h3 class="concertName" data-value="jazz">Smooth Jazz</h3>
                                <p class="country">Boston, USA</p>
                                <p class="location">Secret Garden Club</p>
                            </div>
                            <div class="ticketOrder">
                                <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList3" Width="200px">
                                    <Items>
                                        <telerik:DropDownListItem Text="€250 - Sector A" Value="250,Sector A" />
                                        <telerik:DropDownListItem Text="€180 - Sector B" Value="180,Sector B" />
                                        <telerik:DropDownListItem Text="€120 - Sector C" Value="120,Sector C" />
                                        <telerik:DropDownListItem Text="€500 - VIP" Value="500,VIP" />
                                    </Items>
                                </telerik:RadDropDownList>
                            </div>
                        </div>
                        <div class="concertInfo">
                            <div class="ticketDate">
                                <div class="month">Aug</div>
                                <div class="day">26</div>
                                <div class="weekDay">Saturday</div>
                            </div>
                            <div class="ticketPlace">
                                <h3 class="concertName" data-value="rb">Contemporary R&B</h3>
                                <p class="country">Copenhagen, Denmark</p>
                                <p class="location">Energy Dance Center</p>
                            </div>
                            <div class="ticketOrder">
                                <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList4" Width="200px">
                                    <Items>
                                        <telerik:DropDownListItem Text="€250 - Sector A" Value="250,Sector A" />
                                        <telerik:DropDownListItem Text="€180 - Sector B" Value="180,Sector B" />
                                        <telerik:DropDownListItem Text="€120 - Sector C" Value="120,Sector C" />
                                        <telerik:DropDownListItem Text="€500 - VIP" Value="500,VIP" />
                                    </Items>
                                </telerik:RadDropDownList>
                            </div>
                        </div>
                    </div>
                </telerik:RadWizardStep>
                <telerik:RadWizardStep>
                    <p>Please, export and print your ticket</p>
                    <div class="ticketPrint">
                        <div class="main">
                            <div class="ticketInfo1">
                                <div class="ticketPlace">
                                    <p class="country"></p>
                                    <p class="location"></p>
                                </div>
                                <p class="sector"></p>
                            </div>
                            <span class="concertName"></span>
                            <div class="ticketInfo2">
                                <div class="price"></div>

                                <div class="ticketDate">
                                    <span class="month"></span>
                                    <span class="day"></span>
                                    <span class="weekDay"></span>
                                </div>
                            </div>
                        </div>
                        <div class="sidebar">
                            <telerik:RadBarcode Type="QRCode" runat="server" OutputType="EmbeddedPNG" Text="Ticket ID" Width="125px"></telerik:RadBarcode>

                            <div class="price"></div>

                            <div class="ticketDate">
                                <span class="month"></span>
                                <span class="day"></span>
                                <span class="weekDay"></span>
                            </div>

                            <div class="sector"></div>
                        </div>
                    </div>
                </telerik:RadWizardStep>
            </WizardSteps>
        </telerik:RadWizard>
    </div>
    <script type="text/javascript">

        function pageLoad() {
            var manager = $find("<%= RadClientExportManager1.ClientID %>");
            var loadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
            var wizardId = "<%= RadWizard1.ClientID %>";
            initializeDemo(manager, loadingPanel, wizardId);
        }

    </script>

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

Support & Learning Resources

Find Assistance