PanelBar - Accessing Nested Controls

Registration

  • Step 1: Account Information
      •  
      •  
      •  

  • Step 2: Newsletter options
    • Receive email notification for:

  • Step 3: Terms of use
    • sample terms
       

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

You can access any control embedded in a RadPanelBar's template.

The FindControl method provides you with a reference to any control inside any of the templates used in the RadPanelBar or any of its PanelItems. You have to make sure that you properly typecast the returned value as FindControl returns a reference to a Control class.

After you get the reference you may modify any properties of the referenced control. In this example the Text properties of the three TextBoxes are set.

  • DefaultCS.aspx
  • PreviewCS.ascx
  • DefaultCS.aspx.cs
  • styles.css
<%@ 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 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" />
</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>

Find Assistance

Help Us Improve

Was this example helpful?