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

Partial Page Decoration

Zone Decorated with Office2007 Skin


Zone Decorated with Web20 Skin


Non-decorated Zone


Decorating Specific Parts of the Page

By using DecorationZoneID property, only certain parts of a web page can be decorated. The following example demonstrates how to decorate only portions of the page, and not the whole page. The property value should be the client side ID of an HTML element. The example uses two decoration zones - one decorated with Office2007 skin and the other - with Web20. In addition, outside of the zones there exist buttons and checkboxes that are not decorated.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.DecorationZoneID.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" />
    <div class="demo-containers">
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" DecoratedControls="all" runat="server"
                                  DecorationZoneID="ZoneID1" Skin="Office2007"></telerik:RadFormDecorator>
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator2" DecoratedControls="all" runat="server"
                                  DecorationZoneID="ZoneID2" Skin="Web20"></telerik:RadFormDecorator>
        <div id="ZoneID1" class="demo-container size-custom">
            <fieldset>
                <legend>Zone Decorated with Office2007 Skin</legend>
                <asp:CheckBoxList runat="server" Width="200px">
                    <asp:ListItem Text="CheckBox 1"></asp:ListItem>
                    <asp:ListItem Text="CheckBox 2"></asp:ListItem>
                    <asp:ListItem Text="CheckBox 3"></asp:ListItem>
                </asp:CheckBoxList>
                <br />
                <asp:RadioButtonList runat="server" Width="200px">
                    <asp:ListItem Text="RadioButton 1"></asp:ListItem>
                    <asp:ListItem Text="RadioButton 2"></asp:ListItem>
                    <asp:ListItem Text="RadioButton 3"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
                <asp:Button Text="Do Postback" runat="server" Width="103px"></asp:Button>
            </fieldset>
        </div>
        <div id="ZoneID2" class="demo-container size-custom">
            <fieldset>
                <legend>Zone Decorated with Web20 Skin</legend>
                <asp:CheckBoxList ID="CheckBoxList1" Width="200px" runat="server">
                    <asp:ListItem Text="CheckBox 1"></asp:ListItem>
                    <asp:ListItem Text="CheckBox 2"></asp:ListItem>
                    <asp:ListItem Text="CheckBox 3"></asp:ListItem>
                </asp:CheckBoxList>
                <br />
                <asp:RadioButtonList ID="RadioButtonList1" Width="200px" runat="server">
                    <asp:ListItem Text="RadioButton 1"></asp:ListItem>
                    <asp:ListItem Text="RadioButton 2"></asp:ListItem>
                    <asp:ListItem Text="RadioButton 3"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
                <asp:Button ID="Button1" Text="Do Postback" Width="103px" runat="server"></asp:Button>
            </fieldset>
        </div>
        <div id="ZoneID3" class="demo-container size-custom">
            <fieldset>
                <legend>Non-decorated Zone</legend>
                <asp:CheckBoxList ID="CheckBoxList2" runat="server">
                    <asp:ListItem Text="CheckBox 1"></asp:ListItem>
                    <asp:ListItem Text="CheckBox 2"></asp:ListItem>
                    <asp:ListItem Text="CheckBox 3"></asp:ListItem>
                </asp:CheckBoxList>
                <br />
                <asp:RadioButtonList ID="RadioButtonList2" runat="server">
                    <asp:ListItem Text="RadioButton 1"></asp:ListItem>
                    <asp:ListItem Text="RadioButton 2"></asp:ListItem>
                    <asp:ListItem Text="RadioButton 3"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
                <asp:Button ID="Button2" Text="Do Postback" runat="server"></asp:Button>
            </fieldset>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance