This is a migrated thread and some comments may be shown as answers.

How to get the formdecorator to do his magic?

2 Answers 90 Views

XmlHttpPanel

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

Accepted

answered on 15 Oct 2009, 02:37 PM

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:
.aspx

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function SetValue()

{

var panel = $find("<%=XmlPanel.ClientId %>");

panel.set_value("value");

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)

decorator.decorate(panelElement);

}

</script>

</telerik:RadScriptBlock>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadFormDecorator ID="formDecorator" runat="server" DecoratedControls="All" />

<input type="button" value="SetValue" onclick="SetValue(); return false;" />

<br />

<div style="border: solid 1px Red; width: 520px; height: 200px;">

RadXmlHttpPanel here:<br />

<br />

<telerik:RadXmlHttpPanel ID="XmlPanel" runat="server" OnServiceRequest="ServiceRequest"

OnClientResponseEnded="OnClientResponseEnded">

<asp:Button ID="Button1" runat="server" Text="Button Inside XmlPanel" />

</telerik:RadXmlHttpPanel>

</div>

<br />

<div id="div1">

</div>

</form>

</body>

</html>

.cs

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,
Pero
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to get the formdecorator to do his magic?

2 Answers, 1 is accepted