UI controls for ASP.NET AJAX, MVC, WPF,Silverlight, Windows 8 and Windows Phone
Cross-platform Mobile Development Toolwith cloud-based architecture
Everything you need to build sites andmobile apps with JavaScript and HTML5
One easy tool for Functional, Performance,Load and Mobile software testing
Everything for your online business - contentmanagement, ecommerce, emarketing
Simple and intuitive project managementand collaboration software
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 70+ other controls are part of RadControls 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 the business logic of the app.
RadFormDecorator can style various elements: Buttons, CheckBoxes, TextBox, RadioButtons, Fieldset, Textarea, etc.
<%@ 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> <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 (<H4>) </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 (<H5>):</h5> <asp:CheckBoxList ID="CheckBoxList1" runat="server"> <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 (<H5>):</h5> <asp:RadioButtonList ID="RadioButtonList2" runat="server"> <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> <label for="DropDownList1"> DropDown</label> or <label for="ListBox1"> ListBox</label></h5> <br /> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" Width="100"> <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" Width="100"> <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"></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"> Username (<label>): </label><asp:TextBox runat="server" ID="UsernameBox" Width="140px"></asp:TextBox> <div> </div> <label for="PasswordBox"> Password (<label>): </label><asp:TextBox runat="server" TextMode="Password" ID="PasswordBox" Width="140px"></asp:TextBox> <div> </div> </fieldset> </div> <div style="float: left"> <fieldset style="height: 120px;"> <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; margin-left: 20px;"> <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> <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel2" Width="250" Height="100" 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" /> </form> </body> </html>