RadFormDecorator - Telerik ASP.NET FormDecorator

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
Isolate this demo as a stand-alone application

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 80+ 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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.Overview.DefaultCS" %>

<!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 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 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>
                    <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>
                    <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="false" 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>
                    <asp:ListBox ID="ListBox2" runat="server" AutoPostBack="false" SelectionMode="Multiple" 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>
                    <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>

Find Assistance

Help Us Improve

Was this example helpful?