FormDecorator - Partial Page Decoration

Zone Decorated with Office2007 Skin





Zone Decorated with Web20 Skin





Non-decorated Zone





Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 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>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>

Find Assistance

Help Us Improve

Was this example helpful?