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

Partial Page Updates

UpdatePanel in a decoration zone

Decorated zone
UpdatePanel

Server time: 12/25/2024 5:52:49 PM





Decoration zone in an UpdatePanel

UpdatePanel

Server time: 12/25/2024 5:52:49 PM

Decorated zone





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

Support & Learning Resources

Find Assistance