How to get the formdecorator to do his magic?

3 posts, 1 answers
  1. Wim van der Linden
    Wim van der Linden avatar
    37 posts
    Member since:
    Nov 2008

    Posted 13 Oct 2009 Link to this post


    Like the title says. when I load something with the RadXmlHttpPanel the formdecorator does not decorate the controls.
    How can I make it trigger?

    kind regards,
  2. Answer
    Pero avatar
    1156 posts

    Posted 15 Oct 2009 Link to this post

    Hello Wim,

    When you dynamically add HTML to the page (through JavaScript), the elements will not be decorated. For example if you add an <input> of type="button" will not be decorated. To decorate the "new" HTML you should call the formDecorator.decorate(rootElement) client-side method.

    This is exactly what happens when using the RadXmlHttpPanel. The panel receives HTML content (from the WebService or the Client callback) and inserts it on the page. To decorate this newly received HTML you should handle the OnClientResponseEnded client-side event of the RadXmlHttpPanel and call the decorate(rootElement) method passing the XmlPanel's HTML element as a parameter.

    Please test the following project and you will notice that the button placed inside the RadXmlHttpPanel is decorated even after the service request:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                function SetValue()
                    var panel = $find("<%=XmlPanel.ClientId %>");
                    var div1 = $get("div1");
                    div1.innerHTML = "New HTML inserted - NOT DECORATED <br/> <input type='button' value='New Button' />";
                function OnClientResponseEnded(panel, args)
                    alert("OnClientResponseEnded fired by RadXmlHttpPanel!");
                    var panelElement = panel.get_element();
                    var decorator = $find("<%=formDecorator.ClientID %>");
                    //The following line decorates all of the HTML elements within the panelElement (it is a rootElement)
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <telerik:RadFormDecorator ID="formDecorator" runat="server" DecoratedControls="All" />
        <input type="button" value="SetValue" onclick="SetValue(); return false;" />
        <br />
        <br />
        <div style="border: solid 1px Red; width: 520px; height: 200px;">
            RadXmlHttpPanel here:<br />
            <br />
            <telerik:RadXmlHttpPanel ID="XmlPanel" runat="server" OnServiceRequest="ServiceRequest"
                <asp:Button ID="Button1" runat="server" Text="Button Inside XmlPanel" />
        <br />
        <br />
        <br />
        <div id="div1">
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    public partial class _Default : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
        protected void ServiceRequest(object sender, Telerik.Web.UI.RadXmlHttpPanelEventArgs e)
            Button1.Text = "Button1 Text UPDATED at:" + DateTime.Now.ToString() + " (The Button is decorated)";

    Kind regards,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Telerik UI for ASP.NET Core is out
  4. Wim van der Linden
    Wim van der Linden avatar
    37 posts
    Member since:
    Nov 2008

    Posted 16 Oct 2009 Link to this post

    Hello Pero,

    Thanks the answer provided works flawlessly.
    very clear and to the point.

    kind regards,
Back to Top