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

Styling Telerik Controls

  • File
    • New...
      • File
      • Folder
    • Open
    • Close
    • Save
    • Save as ...
    • Permissions
      • Unrestricted Access
      • Do Not Distribute
  • Edit
    • Cut
    • Copy
    • Paste
  • Tab 1
  • Tab 2
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;

FromNameSubject
1234
Page size:
 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
Folders
Personal Folders
  Deleted Items (6)
  Drafts
 Inbox (14)
   Invoices
  Junk E-mail
  Outbox
  Sent Items
 Search Folders
   Form Follow Up
   Large Mail
   Unread Mail
  • Demo Configurator

This example shows how RadFormDecorator can be used along with Telerik controls such as RadTabStrip, RadTreeList, 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 Telerik UI 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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • datasource.xml
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.FormDecoratorAndTelerikControls.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" />
</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="RadFormDecorator1" DecoratedControls="All" runat="server" DecorationZoneID="decorationZone"></telerik:RadFormDecorator>
    <div class="demo-container" id="decorationZone">
        <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="RadToolTipManager2" RelativeTo="Element"
            Width="150px" Height="50px" Position="TopCenter" OnAjaxUpdate="RadToolTipManager2_AjaxUpdate">
            <TargetControls>
                <telerik:ToolTipTargetControl TargetControlID="Button1" Value="Decorated Button"></telerik:ToolTipTargetControl>
                <telerik:ToolTipTargetControl TargetControlID="chckBox" Value="Decorated CheckBox"></telerik:ToolTipTargetControl>
                <telerik:ToolTipTargetControl TargetControlID="RadioButtonList1" Value="Decorated RadioButtonList"></telerik:ToolTipTargetControl>
            </TargetControls>
        </telerik:RadToolTipManager>
        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="rt1" Text="Turn on/off Decorator" RelativeTo="Element"
            Position="TopCenter" TargetControlID="Button6">
        </telerik:RadToolTip>
        <div class="controlRow">
            <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu2" runat="server">
                <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>
                            <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>
        </div>
        <div class="controlRow">
            <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip2" runat="server" MultiPageID="RadMultiPage1"
                SelectedIndex="0">
                <Tabs>
                    <telerik:RadTab Text="Tab 1">
                    </telerik:RadTab>
                    <telerik:RadTab Text="Tab 2">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="pageView">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <fieldset>
                        <legend>Rounded corners panel </legend>
                        <div class="formRow">
                            <div class="formCell">
                                <h5 style="padding: 0; margin: 0; font-size: 10pt;">Favorite Style</h5>
                            </div>
                            <div class="formCell">
                                <asp:CheckBoxList ID="CheckBoxList1" runat="server" CellPadding="0"
                                    CellSpacing="0">
                                    <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>
                        <div class="formRow">
                            <div class="formCell">
                                <h5 style="padding: 0; margin: 0; font-size: 10pt;">Current Age</h5>
                            </div>
                            <div class="formCell">
                                <asp:RadioButtonList ID="RadioButtonList2" runat="server" CellPadding="0" CellSpacing="0">
                                    <asp:ListItem Text="Under 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>
                        <div class="formRow">
                            <div class="formCell">
                                <label>Name</label>
                            </div>
                            <div class="formCell">
                                <asp:TextBox ID="nametextbox1" runat="server" Text="First"></asp:TextBox>
                                <br />
                                <asp:TextBox ID="nametextbox2" runat="server" Text="Middle"></asp:TextBox>
                                <br />
                                <asp:TextBox ID="nametextbox3" runat="server" Text="Last"></asp:TextBox>
                            </div>
                        </div>
                        <div class="formRow">
                            <div class="formCell">
                                <label>Address</label>
                            </div>
                            <div class="formCell">
                                <textarea cols="21" rows="4" id="textarea">Billing Address</textarea>
                                <br />
                                <textarea cols="21" rows="4" id="textarea1">Shipping Address</textarea>
                            </div>
                        </div>
                        <div class="formRow">
                            <div class="formCell">
                                <label>Volume</label>
                            </div>
                            <div class="formCell">
                                <telerik:RadSlider RenderMode="Lightweight" ID="zoomSlider1" runat="server"></telerik:RadSlider>
                            </div>
                        </div>
                    </fieldset>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server">
                    <fieldset id="roundedCornersPanel">
                        <legend>Rounded corners panel</legend>
                        <p>
                            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;
                        </p>
                        <div class="formCell">
                            <asp:TextBox ID="TextBox1" TextMode="multiLine" Columns="20" Rows="3" runat="server">Rounded corners textbox</asp:TextBox>
                        </div>
                        <div class="formCell">
                            <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                                <asp:ListItem Text="RadioButton1"></asp:ListItem>
                                <asp:ListItem Text="RadioButton2"></asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div class="formCell">
                            <asp:CheckBox ID="chckBox" runat="server" Text="ToolTipified CheckBox"></asp:CheckBox>
                        </div>
                        <div>
                            <asp:Button runat="server" ID="Button1" Text="Submit Button"></asp:Button>
                        </div>
                    </fieldset>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
        <div class="controlRow">
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" AllowSorting="true"
                AllowPaging="true" PageSize="4" AllowMultiRowSelection="true">
                <MasterTableView>
                    <Columns>
                        <telerik:GridClientSelectColumn HeaderStyle-Width="20px">
                        </telerik:GridClientSelectColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true">
                    <Selecting AllowRowSelect="true"></Selecting>
                </ClientSettings>
            </telerik:RadGrid>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="datasource.xml"></asp:XmlDataSource>
        </div>
        <div class="controlRow">
            <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource"
                DataKeyNames="ID" ParentDataKeyNames="TypeID" AutoGenerateColumns="false" AllowMultiItemSelection="true">
                <Columns>
                    <telerik:TreeListSelectColumn HeaderStyle-Width="38px">
                    </telerik:TreeListSelectColumn>
                    <telerik:TreeListBoundColumn DataField="Name" HeaderText="Folders" UniqueName="Name">
                    </telerik:TreeListBoundColumn>
                </Columns>
            </telerik:RadTreeList>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" ID="Button6" OnClick="ButtonClick" Text="Switch Decorator Off"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance