<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="PanelBar.Examples.ApplicationScenarios.AccessingNestedControls.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="PreviewCS.ascx" TagName="PreviewCS" TagPrefix="uc1" %>
<!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" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecoratedControls="Label,Textbox" Skin="Silk" />
<div class="demo-container">
<h2>Registration</h2>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" ExpandMode="SingleExpandedItem" OnItemClick="RadPanelBar1_ItemClick" Skin="Silk"
Width="100%">
<Items>
<telerik:RadPanelItem Expanded="True" Text="Step 1: Account Information" runat="server"
Selected="true">
<Items>
<telerik:RadPanelItem Value="AccountInformation" runat="server">
<ItemTemplate>
<div class="qsf-fb">
<ul id="accountInfo">
<li>
<asp:Label runat="server" ID="nameLabel" AssociatedControlID="accountName">Account Name:</asp:Label>
<asp:TextBox ID="accountName" CssClass="textInput" runat="server" ValidationGroup="accountValidation"
Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="accountValidator" ValidationGroup="accountValidation"
ControlToValidate="accountName" ErrorMessage="Account name is required" Text="*"></asp:RequiredFieldValidator>
</li>
<li>
<asp:Label runat="server" ID="Label1" AssociatedControlID="Password">Password:</asp:Label>
<asp:TextBox ID="password" CssClass="textInput" TextMode="Password" ValidationGroup="accountValidation"
runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ValidationGroup="accountValidation" ID="passwordValidator"
ControlToValidate="password" ErrorMessage="Password is required" Text="*"></asp:RequiredFieldValidator>
</li>
<li>
<asp:Label runat="server" ID="Label2" AssociatedControlID="cPassword">Confirm Password:</asp:Label>
<asp:TextBox TextMode="Password" CssClass="textInput" ValidationGroup="accountValidation"
ID="cPassword" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ValidationGroup="accountValidation" ID="RequiredFieldValidator2"
ControlToValidate="cPassword" ErrorMessage="Password is required" Text="*"></asp:RequiredFieldValidator>
</li>
<li class="lastListItem">
<asp:Label runat="server" ID="Label3" AssociatedControlID="email">Email:</asp:Label>
<asp:TextBox ID="email" ValidationGroup="accountValidation" CssClass="textInput"
runat="server" Width="200px"></asp:TextBox>
<asp:RegularExpressionValidator ID="emailValidator" runat="server" Display="Dynamic"
ErrorMessage="Please enter a valid e-mail address." ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"
ControlToValidate="Email" ValidationGroup="accountValidation">
</asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" Display="Dynamic"
ControlToValidate="Email" ErrorMessage="E-mail is required" Text="*" ValidationGroup="accountValidation"></asp:RequiredFieldValidator>
</li>
</ul>
<br />
<asp:ValidationSummary runat="server" ID="validationSummary" CssClass="validationSummary" />
<p class="buttons">
<telerik:RadButton RenderMode="Lightweight" runat="server" ID="nextButton" OnClick="nextButton_Click" Text="Next" Skin="Silk"
ValidationGroup="accountValidation" />
</p>
</div>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Enabled="false" Text="Step 2: Newsletter options" runat="server">
<Items>
<telerik:RadPanelItem Value="NewsletterOptions" runat="server">
<ItemTemplate>
<div class="qsf-fb" id="newsletterOptions">
<h2>Receive email notification for:</h2>
<ul>
<li>
<asp:CheckBox runat="server" ID="productUpdates" Text="Product Updates" />
</li>
<li>
<asp:CheckBox runat="server" ID="promotions" Text="Promotions" />
</li>
<li class="lastListItem">
<asp:CheckBox runat="server" ID="corporateNews" Text="Corporate News" />
</li>
</ul>
<p class="buttons">
<telerik:RadButton RenderMode="Lightweight" runat="server" ID="nextButton" OnClick="nextButton_Click" Text="Next" Skin="Silk" />
</p>
</div>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Enabled="False" Text="Step 3: Terms of use" runat="server">
<Items>
<telerik:RadPanelItem Value="Register" runat="server">
<ItemTemplate>
<div class="qsf-fb">
<div class="formList" id="termsOfUse">
<img class="sample-terms" src="images/terms.png" alt="sample terms" width="550" height="224" />
<div class="agreement">
<asp:CheckBox runat="server" ID="termsCheckBox" Text="I agree to the Terms and Conditions" />
<asp:CustomValidator runat="server" ValidationGroup="registerGroup" ErrorMessage="You should agree with the terms and conditions.!"
ClientValidationFunction="validateTerms" ID="termsValidator" Text="*" />
</div>
</div>
<p class="buttons">
<telerik:RadButton RenderMode="Lightweight" runat="server" Text="Register" ID="registerButton" Skin="Silk"
ValidationGroup="registerGroup" OnClick="registerButton_Click" />
</p>
</div>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</Items>
<CollapseAnimation Duration="0" Type="None" />
<ExpandAnimation Duration="0" Type="None" />
</telerik:RadPanelBar>
<uc1:PreviewCS ID="previewControl" runat="server" Visible="false" />
<telerik:RadButton RenderMode="Lightweight" runat="server" ID="backButton" Visible="false" CssClass="qsfButton backButton" Text="Back" Skin="Silk"
OnClick="backButton_Click"></telerik:RadButton>
</telerik:RadAjaxPanel>
</div>
<telerik:RadScriptBlock runat="server">
<script type="text/javascript">
function validateTerms(source, args) {
var checkbox = '<%=((CheckBox)RadPanelBar1.Items[2].Items[0].FindControl("termsCheckBox")).ClientID%>';
args.IsValid = $get(checkbox).checked;
}
</script>
</telerik:RadScriptBlock>
</form>
</body>
</html>