New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms FormDecorator Overview

Skinned Form Controls (<H4>)

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



Text Boxes
 
 
Textarea
  • Demo Configurator
Select Default Groups

Select Elements








Select RenderMode

RadFormDecorator can style various elements: Buttons, CheckBoxes, TextBoxes, RadioButtons, Fieldsets, Textareas, etc.

About RadFormDecorator for ASP.NET AJAX

How do you feel when you cannot style adequately simple elements like buttons or checkboxes on your web apps? Well, the Telerik FormDecorator control can save you from this task. This is a unique control that steps in to fill the gap and provide you with a simple to use, flexible and configurable control that can deliver the "finishing touch" for a true rich UI. It integrates seamlessly into the page and doesn't require any changes to the existing page's layout.

RadFormDecorator and 120+ other controls are part of UI for ASP.NET AJAX , a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • RadFormDecorator can style various elements: Buttons, CheckBoxes, TextBox, RadioButtons, Fieldset, Textarea, etc
  • The control allows you to add hover effects to buttons, check boxes and radio buttons.
  • The component supports all major browsers, including IE, Firefox, Google Chrome, Opera and Safari.
  • Telerik FormDecorator component provides different styles for disabled radio buttons, checkboxes and textboxes.
  • It takes only seconds to add RadFormDecorator to your page and check if it fits for your page or application.
  • Ships with rich set of skins for easy and consistent styling with the look and feel of Vista, Office 2007, Office2010 (Black, Blue, Silver) Outlook, etc.
More about RadFormDecorator for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.Overview.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/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" ID="FormDecorator1" runat="server" DecoratedControls="all" DecorationZoneID="decorationZone"></telerik:RadFormDecorator>
    <div class="demo-containers">
        <div class="demo-container" id="decorationZone">
            <h4>Skinned Form Controls (&lt;H4&gt;)</h4>
            <fieldset>
                <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" TabIndex="1">
                        <asp:ListItem Text="Classic" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Rock" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Jazz and Fusion"></asp:ListItem>
                        <asp:ListItem Text="Rhythm and Blues"></asp:ListItem>
                        <asp:ListItem Text="Hard'n'Heavy"></asp:ListItem>
                    </asp:CheckBoxList>
                </div>
                <div class="formRow" style="padding-right: 16px;">
                    <h5>Select Age (&lt;H5&gt;):</h5>
                    <asp:RadioButtonList ID="RadioButtonList2" runat="server" TabIndex="2">
                        <asp:ListItem Text="below 18"></asp:ListItem>
                        <asp:ListItem Text="18-22"></asp:ListItem>
                        <asp:ListItem Text="23-29" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="30-39"></asp:ListItem>
                        <asp:ListItem Text="40-49"></asp:ListItem>
                        <asp:ListItem Text="50-59"></asp:ListItem>
                        <asp:ListItem Text="60 and above"></asp:ListItem>
                    </asp:RadioButtonList>
                </div>
                <div class="formRow" style="border: 0;">
                    <h5>Select Genre (&lt;H5&gt;)
                    </h5>
                    <div class="selectSeparator"></div>
                    <label for="<%= DropDownList1.ClientID %>">DropDownList (&lt;label&gt;):&nbsp;</label>
                    <br />
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" Width="135px" TabIndex="3">
                        <asp:ListItem Text="Comedy" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Drama" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Romance" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Religious" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
                    </asp:DropDownList>
                    <div class="selectSeparator"></div>
                    <label for="<%= ListBox1.ClientID %>">ListBox (&lt;label&gt;):&nbsp;</label>
                    <br />
                    <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="false" Height="70px" Width="135px" TabIndex="4">
                        <asp:ListItem Text="Comedy" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Drama" Value="2" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Romance" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Religious" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
                    </asp:ListBox>
                    <div class="selectSeparator"></div>
                    <label for="<%= ListBox2.ClientID %>">ListBox (&lt;label&gt;):&nbsp;</label>
                    <br />
                    <asp:ListBox ID="ListBox2" runat="server" AutoPostBack="false" SelectionMode="Multiple" Height="70px" Width="135px" TabIndex="5">
                        <asp:ListItem Text="Comedy" Value="1" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Drama" Value="2" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Romance" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Religious" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Fantasy" Value="5"></asp:ListItem>
                        <asp:ListItem Text="Mystery" Value="6"></asp:ListItem>
                        <asp:ListItem Text="Science fiction" Value="7"></asp:ListItem>
                    </asp:ListBox>
                </div>
                <div style="padding-left: 16px; clear: both;">
                    <asp:Button ID="Button1" runat="server" Text="Submit Form" TabIndex="6"></asp:Button>
                </div>
            </fieldset>
            <div>
                <fieldset>
                    <legend>Text Boxes</legend>
                    <label for="<%= UsernameBox.ClientID %>">Username (&lt;label&gt;):&nbsp;</label>
                    <asp:TextBox runat="server" ID="UsernameBox" Width="150px" TabIndex="7"></asp:TextBox>
                    <div>
                        &nbsp;
                    </div>
                    <label for="<%= PasswordBox.ClientID %>">Password (&lt;label&gt;):&nbsp;</label>
                    <asp:TextBox runat="server" TextMode="Password" ID="PasswordBox" Width="150px" TabIndex="8"></asp:TextBox>
                    <div>
                        &nbsp;
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Textarea</legend>
                    <label for="<%= TextArea1.ClientID %>">Textarea (&lt;label&gt;):&nbsp;</label>
                    <asp:TextBox ID="TextArea1" Style="margin-left: 6px; margin-bottom: 2px; height: 70px; width: 240px;"
                        runat="server" TextMode="MultiLine" Text="Enter Text..." Rows="4" TabIndex="9"
                        Columns="20"></asp:TextBox>
                </fieldset>
            </div>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance