<%@ Page AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="ClientExportManager.Overview.DefaultVB"Language="vb"  %>
<!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 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>