Form Decorator

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadFormDecorator - Telerik's ASP.NET FormDecorator

Skinned Form Controls (<H4>)


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




Select Age (<H5>):






Select Genre (<H5>)
Text Boxes
 
 
Textarea
Select decorated controls











Select render mode


tlrk.it/1cJhjuG To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1cJhjuG

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 new Telerik FormDecorator control can unload 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.

About This Demo

RadFormDecorator can style various elements: Buttons, CheckBoxes, TextBox, RadioButtons, Fieldset, Textarea, etc.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular FormDecorator demo, you can use the following path to find it in the sample website application:
formdecorator/examples/overview

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.

Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/FormDecorator/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>Tutorial for RadFormDecorator - style any control in ASP.NET</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="QsfSkinManager" runat="server" ShowChooser="true" />
        <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"
            DecorationZoneID="rfd-demo-zone"></telerik:RadFormDecorator>
        <div id="rfd-demo-zone">
            <div style="float: left; margin: 0 8px 0 0;">
                <div>
                    <h4>Skinned Form Controls (&lt;H4&gt;)
                    </h4>
                    <br />
                    <div id="decorationZone">
                        <fieldset class="heightFix">
                            <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>
                    <div style="float: left; text-align: right; margin-right: 5px;">
                        <fieldset style="height: 120px;">
                            <legend style="text-align: left;">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>
                    </div>
                    <div style="float: left">
                        <fieldset style="height: 120px;">
                            <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>
            <div style="width: 250px; float: left; margin-left: 20px;">
                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Width="250" 
                    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>
                <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel2" Width="250" 
                    Title="Select render mode" Expanded="true">
                    <div style="margin-left: 18px;">
                        <asp:RadioButtonList ID="cbChooseRenderMode" runat="server" AutoPostBack="True" RepeatDirection="Vertical"
                            OnSelectedIndexChanged="cbChooseRenderMode_SelectedIndexChanged">
                            <asp:ListItem Value="Classic" Selected="True">Classic</asp:ListItem>
                            <asp:ListItem Value="Lightweight">Lightweight</asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
                </qsf:ConfiguratorPanel>
            </div>
        </div>
        <br class="qsf-clear-float" />
    <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/FormDecorator.png" AlternateText="tlrk.it/1cJhjuG" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1cJhjuG">tlrk.it/1cJhjuG</a>
    </div>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here