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 Q2 2011 released 07/12/2011
select

FormDecorator / Styling RadControls

Rounded corners panel
Favorite Style
 
Current Age
Rounded corners panel
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque id neque. Proin volutpat vestibulum magna. Fusce faucibus metus id pede. Integer molestie neque vitae justo. Quisque lacinia velit nec elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;



Grid
FromNameSubject
1234
Page size:
select
 14 items in 4 pages
john@johnsmith.comJohn SmithHi there
john@johnsmith.comJohn SmithHi there
john@johnsmith.comJohn SmithHi there
john@johnsmith.comJohn SmithHi there

  • Personal Folders
    • Deleted Items (6)
    • Drafts
    • Inbox (14)
      • Invoices
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders
      • Form Follow Up
      • Large Mail
      • Unread Mail

  • RadFormDecorator for ASP.NET AJAX

    This example shows how RadFormDecorator can be used along with RadControls such as RadTabStrip, RadTreeview, RadToolTip, RadGrid. RadFormDecorator will style any standard elements like CheckBox, Textarea, Fieldset, Input, Label, H4, etc. in these controls' templates and will apply visual effects like mouse over and rounded corners thus providing better visual experience. 

    In addition to the predefined skins, you can easily create your custom ones by following the instructions in the documentation. More information on how skins work and how to create custom ones is available in section RadControls for ASP.NET AJAX Fundamentals / Controlling Visual Appearance (online version).

    NOTE: In order to have the RadToolTip and the RadFormDecorator work correctly in integration you should declare the RadFormDecorator before the RadToolTip on the 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.FormDecoratorAndRadControls.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>RadFormDecorator TEXTAREA, TEXTBOX, FIELDSET etc </title>
        <style type="text/css">
            /* Respect margins and paddings */fieldset
            {
                padding: 0px;
                margin: 5px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" />
        <telerik:RadToolTipManager runat="server" ID="RadToolTipManager2" RelativeTo="Element"
            Width="150px" Height="20" Position="TopCenter" OnAjaxUpdate="RadToolTipManager2_AjaxUpdate">
            <TargetControls>
                <telerik:ToolTipTargetControl TargetControlID="Button1" Value="Decorated Button" />
                <telerik:ToolTipTargetControl TargetControlID="chckBox" Value="Decorated CheckBox" />
                <telerik:ToolTipTargetControl TargetControlID="RadioButtonList1" Value="Decorated RadioButtonList" />
            </TargetControls>
        </telerik:RadToolTipManager>
        <telerik:RadToolTip runat="server" ID="rt1" Text="Turn on/off Decorator" RelativeTo="Element"
            Position="TopCenter" TargetControlID="Button6">
        </telerik:RadToolTip>
        <table border="0">
            <tr>
                <td colspan="2">
                    <table style="width: 513px; border: 0">
                        <tr>
                            <td>
                                <telerik:RadTabStrip ID="RadTabStrip2" runat="server" MultiPageID="RadMultiPage1"
                                    SelectedIndex="0">
                                    <Tabs>
                                        <telerik:RadTab Text="Tab 1" Width="130px">
                                        </telerik:RadTab>
                                        <telerik:RadTab Text="Tab 2" Width="130px">
                                        </telerik:RadTab>
                                    </Tabs>
                                </telerik:RadTabStrip>
                            </td>
                            <td style="text-align: right;">
                                <asp:Button runat="server" ID="Button6" OnClick="ButtonClick" Text="Switch Decorator Off" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td valign="top" style="width: 530px">
                    <telerik:RadMultiPage ID="RadMultiPage1" Width="530px" runat="server" SelectedIndex="0"
                        CssClass="pageView">
                        <telerik:RadPageView ID="RadPageView1" runat="server">
                            <fieldset style="width: 520px">
                                <legend>Rounded corners panel </legend>
                                <table id="parentTable" border="0" cellpadding="5">
                                    <tr>
                                        <td style="vertical-align: top; width: 200px">
                                            <table>
                                                <tr>
                                                    <td style="vertical-align: top; white-space: nowrap;">
                                                        <h5 style="padding: 0; margin: 0; font-size: 10pt;">
                                                            Favorite Style</h5>
                                                    </td>
                                                    <td style="vertical-align: top">
    <asp:CheckBoxList ID="CheckBoxList1" runat="server" CellPadding="0" Width="130px"
    CellSpacing="0">
                                                            <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>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2">
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="vertical-align: top; text-align: right">
                                                        <h5 style="padding: 0; margin: 0; font-size: 10pt;">
                                                            Current Age</h5>
                                                    </td>
                                                    <td style="vertical-align: top">
                                                        <asp:RadioButtonList ID="RadioButtonList2" runat="server" CellPadding="0" CellSpacing="0">
                                                            <asp:ListItem Text="Under 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>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td style="vertical-align: top">
                                            <table>
                                                <tr>
                                                    <td style="vertical-align: top" valign="top">
                                                        <label>
                                                            Name</label>
                                                    </td>
                                                    <td style="vertical-align: top">
                                                        <asp:TextBox ID="nametextbox1" runat="server" Text="First" Style="width: 200px"></asp:TextBox>
                                                        <asp:TextBox ID="nametextbox2" runat="server" Text="Middle" Style="width: 200px"></asp:TextBox>
                                                        <asp:TextBox ID="nametextbox3" runat="server" Text="Last" Style="width: 200px"></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="vertical-align: top">
                                                        <label>
                                                            Address</label>
                                                    </td>
                                                    <td style="vertical-align: top">
                                                        <textarea cols="21" rows="4" style="width: 200px;" id="textarea">Billing Address</textarea>
                                                        <textarea cols="21" rows="4" style="width: 200px;" id="textarea1">Shipping Address</textarea>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="vertical-align: top">
                                                        <label>
                                                            Volume</label>
                                                    </td>
                                                    <td style="vertical-align: top">
                                                        <telerik:RadSlider ID="zoomSlider1" runat="server" Width="207px" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </fieldset>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView2" runat="server">
                            <fieldset style="width: 520px" id="roundedCornersPanel">
                                <legend>Rounded corners panel</legend>
                                <div>
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque id neque.
                                    Proin volutpat vestibulum magna. Fusce faucibus metus id pede. Integer molestie
                                    neque vitae justo. Quisque lacinia velit nec elit. Vestibulum ante ipsum primis
                                    in faucibus orci luctus et ultrices posuere cubilia Curae;
                                    <br />
                                    <div style="float: left">
                                        <asp:TextBox ID="TextBox1" TextMode="multiLine" Columns="20" Rows="3" runat="server">Rounded corners textbox</asp:TextBox>
                                    </div>
                                    <div style="float: left">
                                        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                                            <asp:ListItem Text="RadioButton1"></asp:ListItem>
                                            <asp:ListItem Text="RadioButton2"></asp:ListItem>
                                        </asp:RadioButtonList>
                                    </div>
                                    <br style="clear: both;" />
                                    <asp:CheckBox ID="chckBox" runat="server" Text="ToolTipified CheckBox" />
                                    <br style="clear: both;" />
                                    <br style="clear: both;" />
                                    <asp:Button runat="server" ID="Button1" Text="Submit Button" />
                                </div>
                            </fieldset>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                    <fieldset style="width: 520px">
                        <legend>Grid</legend>
                        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" AllowSorting="true"
                            AllowPaging="true" PageSize="4" AllowMultiRowSelection="true">
                            <MasterTableView>
                                <Columns>
                                    <telerik:GridClientSelectColumn HeaderStyle-Width="20px" />
                                </Columns>
                            </MasterTableView>
                            <ClientSettings EnableRowHoverStyle="true">
                                <Selecting AllowRowSelect="true" />
                            </ClientSettings>
                        </telerik:RadGrid>
                        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="datasource.xml" />
                    </fieldset>
                </td>
                <td valign="top" style="padding: 20px">
                    <telerik:RadMenu ID="RadMenu2" runat="server" Style="float: left; clear: both;">
                        <Items>
                            <telerik:RadMenuItem Text="File">
                                <Items>
                                    <telerik:RadMenuItem Text="New...">
                                        <Items>
                                            <telerik:RadMenuItem Text="File">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Folder">
                                            </telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem IsSeparator="True" />
                                    <telerik:RadMenuItem Text="Open">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Close">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Save">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Save as ..." Enabled="false">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Permissions">
                                        <Items>
                                            <telerik:RadMenuItem Text="Unrestricted Access">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Do Not Distribute">
                                            </telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Edit">
                                <Items>
                                    <telerik:RadMenuItem Text="Cut">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Copy">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Paste">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>
                    <br />
                    <telerik:RadTreeView CheckBoxes="true" ID="RadTreeView1" runat="server"
                        Width="300px">
                        <Nodes>
                            <telerik:RadTreeNode Text="Personal Folders" Expanded="True">
                                <Nodes>
                                    <telerik:RadTreeNode Checked="true" Text="Deleted Items (6)" />
                                    <telerik:RadTreeNode Text="Drafts" />
                                    <telerik:RadTreeNode Text="Inbox (14)" Checked="true" Expanded="True">
                                        <Nodes>
                                            <telerik:RadTreeNode Text="Invoices" />
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Junk E-mail" />
                                    <telerik:RadTreeNode Text="Outbox" />
                                    <telerik:RadTreeNode Text="Sent Items" Checked="true" />
                                    <telerik:RadTreeNode Text="Search Folders" Checked="true" Expanded="True">
                                        <Nodes>
                                            <telerik:RadTreeNode Text="Form Follow Up" />
                                            <telerik:RadTreeNode Text="Large Mail" />
                                            <telerik:RadTreeNode Text="Unread Mail" />
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeView>
                </td>
            </tr>
        </table>
        <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-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451