Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

FormDecorator / First Look

Skinned Form Controls (<H4>)

Decoration zone
Select Your Favorite Styles (<H5>):
Select Age (<H5>):
or



Text Boxes
 
 
Select decorated controls












  • RadFormDecorator for ASP.NET AJAX

    Telerik RadFormDecorator for ASP.NET AJAX delivers CSS skinning of:

    • Buttons
    • CheckBoxes
    • Fieldset
    • H4,H5,H6
    • Label
    • RadioButtons
    • Scrollbars
    • Textarea
    • Textbox
    • SELECT
    • GridView
    • DetailsView
    • FormView
    • Login
    • LoginName
    • LoginView
    • LoginStatus
    • ChangePassword
    • CreateUser
    • ValidationSummary

    elements without using any additional html - hidden inputs, div's, etc and thus preserving the semantics and normal layout of the webpage.

    For best results when using RadFormDecorator, follow these recommendations:

    1. Place your RadFormDecorator on top of the page, under the RadScriptManager.
    2. Specify width to decorated buttons, textareas and fieldsets. Reasons are:
      • buttons - different browsers render "default" buttons very differently (for example - different borders and paddings), which affects overall size
      • textareas - columns are rendered with different width in different browsers.
      • fieldsets - when no width is specified, decoration can produce different results in different browsers

    Notes:

    • RadFormDecorator decorates only H4, H5 and H6 headings. Usually developers have already assigned different styles for the main H1, H2 and H3 tags.
    • RadFormDecorator decorates the HTML element Label. The asp:Label control cannot be decorated because it is rendered on the client as a SPAN element that cannot be distinguished from others SPAN elements used on the same page.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.Default.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><%@ Register
        TagPrefix="qsf" Namespace="Telerik.QuickStart" %><%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %><%@ Register TagPrefix="qsf"
        TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <title>ASP.NET FormDecorator Demo - First Look</title>
        <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"></telerik:RadFormDecorator>
            <div style="width: 569px; float: left; margin: 0 8px 0 0;">
                <div>
                    <h4>
                        Skinned Form Controls (&lt;H4&gt;)
                    </h4>
                    <div id="decorationZone">
                        <fieldset style="height: 260px; width: 550px;">
                            <legend>Decoration zone</legend>
                            <div class="formRow" style="padding-right: 10px; padding-left: 10px;">
                                <h5>
                                    Select Your Favorite Styles (&lt;H5&gt;):</h5>
                                <asp:CheckBoxList ID="CheckBoxList1" runat="server" Width="130px">
                                    <asp:ListItem Text="Classic" Selected="True" />
                                    <asp:ListItem Text="Rock" Selected="True" />
                                    <asp:ListItem Text="Jazz and Fusion" />
                                    <asp:ListItem Text="Rhythm and Blues" />
                                    <asp:ListItem Text="Hard'n'Heavy" />
                                </asp:CheckBoxList>
                            </div>
                            <div class="formRow" style="padding-right: 16px;">
                                <h5>
                                    Select Age (&lt;H5&gt;):</h5>
                                <asp:RadioButtonList ID="RadioButtonList2" runat="server" Width="105px">
                                    <asp:ListItem Text="below 18" />
                                    <asp:ListItem Text="18-22" />
                                    <asp:ListItem Text="23-29" Selected="True" />
                                    <asp:ListItem Text="30-39" />
                                    <asp:ListItem Text="40-49" />
                                    <asp:ListItem Text="50-59" />
                                    <asp:ListItem Text="60 and above" />
                                </asp:RadioButtonList>
                            </div>
                            <div class="formRow" style="border: 0;">
                                <h5>
                                    <label for="DropDownList1">DropDown</label> or <label for="ListBox1">ListBox</label></h5>
                                    <br />
                                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false">
                                    <asp:ListItem Text="Select 1" Value="1"></asp:ListItem>
                                    <asp:ListItem Text="Select 2" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="Select 3" Value="3"></asp:ListItem>
                                    <asp:ListItem Text="Select 4" Value="4"></asp:ListItem>
                                </asp:DropDownList>
                                <br /><br />
                                <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="false">
                                    <asp:ListItem Text="List 1" Value="1"></asp:ListItem>
                                    <asp:ListItem Text="List 2" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="List 3" Value="3"></asp:ListItem>
                                    <asp:ListItem Text="List 4" Value="4"></asp:ListItem>
                                </asp:ListBox>
                            </div>
                            <div style="padding-left: 16px; clear: both;">
                                <asp:Button ID="Button1" runat="server" Text="Submit Form" style="width:95px;" />
                            </div>
                        </fieldset>
                    </div>
                    <div style="float: left; text-align:right; margin-right: 5px;">
                        <fieldset style="height: 100px; width: 270px">
                            <legend style="text-align:left;">Text Boxes</legend>
                            <label for="UsernameBox">
                                Username (&lt;label&gt;):&nbsp;</label><asp:TextBox runat="server" ID="UsernameBox" Width="140px"></asp:TextBox>
                            <div>
                                &nbsp;</div>
                            <label for="PasswordBox">
    Password (&lt;label&gt;):&nbsp;</label><asp:TextBox runat="server" TextMode="Password" ID="PasswordBox"
    Width="140px"></asp:TextBox>
                            <div>
                                &nbsp;</div>
                        </fieldset>
                    </div>
                    <div style="float: left">
                        <fieldset style="height: 100px; width: 240px">
                            <legend><label for="TextArea1">Textarea</label></legend>
    <asp:TextBox ID="TextArea1" Style="margin-left: 6px; margin-bottom: 2px; height: 70px; width: 220px;" runat="server" TextMode="MultiLine"
    Text="Enter Text..." Rows="4" Columns="20"></asp:TextBox>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div style="width: 250px; float: left;">
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Width="250" Height="415" Title="Select decorated controls"
                        Expanded="true">
                    <div style="margin-left: 18px;">
    <asp:RadioButtonList ID="DecoratedControlsRadioList" runat="server" Width="200px" AutoPostBack="true"
    OnSelectedIndexChanged="DecoratedControlsRadioList_SelectedIndexChanged">
                            <asp:ListItem Text="All" Value="All" Selected="true">
                            </asp:ListItem>
                            <asp:ListItem Text="Default" Value="Default">
                            </asp:ListItem>
                            <asp:ListItem Text="None" Value="None">
                            </asp:ListItem>
                        </asp:RadioButtonList>
    <asp:CheckBoxList ID="DecoratedControlsCheckBoxList" Width="200px" runat="server" AutoPostBack="True"
    OnSelectedIndexChanged="DecoratedControlsCheckBoxList_SelectedIndexChanged">
                            <asp:ListItem Text="Buttons" Value="Buttons">
                            </asp:ListItem>
                            <asp:ListItem Text="CheckBoxes" Value="CheckBoxes">
                            </asp:ListItem>
                            <asp:ListItem Text="Fieldset" Value="Fieldset">
                            </asp:ListItem>
                            <asp:ListItem Text="Headings (H4,H5,H6)" Value="H4H5H6">
                            </asp:ListItem>
                            <asp:ListItem Text="HTML Label" Value="Label">
                            </asp:ListItem>
                            <asp:ListItem Text="RadioButtons" Value="RadioButtons">
                            </asp:ListItem>
                            <asp:ListItem Text="Scrollbars" Value="Scrollbars">
                            </asp:ListItem>
                            <asp:ListItem Text="Textarea" Value="Textarea">
                            </asp:ListItem>
                            <asp:ListItem Text="Textbox" Value="Textbox">
                            </asp:ListItem>
                            <asp:ListItem Text="Select" Value="Select">
                            </asp:ListItem>
                        </asp:CheckBoxList>
                    </div>
                </qsf:ConfiguratorPanel>
            </div>
        </telerik:RadAjaxPanel>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451