RadClientExportManager - Telerik ASP.NET ClientExportManager

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

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

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 90+ 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
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="ClientExportManager.Overview.DefaultVB"Language="vb"  %>

<!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>
    <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 ID="RadBarcode1" 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

Help Us Improve

Was this example helpful?