FormDecorator - Partial Page Updates

UpdatePanel in a decoration zone

Decorated zone

UpdatePanel

Server time: 12/6/2016 12:55:10 AM





Decoration zone in an UpdatePanel

UpdatePanel

Server time: 12/6/2016 12:55:10 AM

Decorated zone






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

RadFormDecorator is able to detect partial page updates and redecorate updated page regions automatically. Partial page updates are the result of an AJAX request that returns new HTML for portions of the page, most often the content of UpdatePanel controls.

RadFormDecorator covers three scenarios with partial page updates involved:
  1. The decoration zone (set with DecorationZoneID property) is an UpdatePanel control
  2. An UpdatePanel contains a decorated zone
  3. A decorated zone contains an UpdatePanel

All three scenarios are handled automatically, and the page is properly re-decorated after a partial page update.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.PartialPageUpdates.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="RadFormDecorator2" runat="server" DecoratedControls="All"
            DecorationZoneID="ZoneID3"></telerik:RadFormDecorator>
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator3" runat="server" DecoratedControls="All"
            DecorationZoneID="ZoneID4"></telerik:RadFormDecorator>
        <div id="ZoneID4" class="demo-container size-thin">
            <h2>UpdatePanel in a decoration zone</h2>
            <fieldset>
                <legend>Decorated zone</legend>
                <asp:RadioButtonList ID="RadioButtonList1" 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>
                <fieldset>
                    <legend>UpdatePanel</legend>
                    <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <h3>Server time:
                            <%= DateTime.Now.ToString() %>
                            </h3>
                            <asp:CheckBox ID="CheckBox6" runat="server" Text="CheckBox2"></asp:CheckBox><br />
                            <asp:CheckBox ID="CheckBox7" runat="server" Text="CheckBox2"></asp:CheckBox><br />
                            <br />
                            <asp:Button ID="Button5" runat="server" Text="callback"></asp:Button>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </fieldset>
                <br />
                <asp:Button ID="Button4" runat="server" Text="Postback"></asp:Button>
            </fieldset>
        </div>
        <div id="ZoneID2" class="demo-container size-thin">
            <h2>Decoration zone in an UpdatePanel</h2>
            <fieldset>
                <legend>UpdatePanel</legend>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <h3>Server time:
                        <%= DateTime.Now.ToString() %>
                        </h3>
                        <div id="ZoneID3">
                            <fieldset>
                                <legend>Decorated zone</legend>
                                <asp:RadioButtonList 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 />
                                <br />
                                <asp:CheckBox ID="Checkbox4" runat="server" Text="CheckBox 1"></asp:CheckBox>
                                <br />
                                <asp:CheckBox ID="Checkbox5" runat="server" Text="CheckBox 2"></asp:CheckBox>
                                <br />
                                <br />
                                <asp:Button ID="Button2" runat="server" Text="callback"></asp:Button>
                            </fieldset>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </fieldset>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?