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