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

UpdatePanel and duplicate controls error

3 Answers 614 Views

Window

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

Gilbert asked on 04 Aug 2010, 08:43 PM

Hi,

I have a RadWindow as a usercontrol and when I postback using control inside the RadWindow I get the following error message:

"Two components with the same id 'rwt_RadWindow1_C_UpdateProgress1' can't be added to the application."

This seems to happen when the RadWindow is inside an update panel. I'm also using javascript to open and close the RadWindow because I don't want to call the server when that occurs. Below is an example that I came up with.

Main Page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test.Default" %>

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

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

<%@ Register Src="RadWindowTest.ascx" TagName="RadWindowTest" TagPrefix="custom" %>

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

<head runat="server">

<title></title>

</head>

<body>

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

<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server">

</ajaxToolkit:ToolkitScriptManager>

<asp:UpdatePanel ID="upd" runat="server">

<ContentTemplate>

<custom:RadWindowTest ID="rwt" runat="server" />

<br />

<asp:Label ID="dummyLabel" runat="server"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

UserControl Markup

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RadWindowTest.ascx.cs"

Inherits="Test.RadWindowTest" %>

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

<style type="text/css">

.hidebutton

{

visibility: hidden;

}

</style>

<a href="#" id="aOpenWindow" runat="server" onclick="openWin(); return false;">Open

Window</a>

<telerik:RadWindow ID="RadWindow1" runat="server" Modal="True" Width="1000px" Height="600px"

AutoSize="false" Skin="Office2007" Animation="None" Behaviors="Move,Close" KeepInScreenBounds="true"

ReloadOnShow="false" VisibleStatusbar="False" VisibleTitlebar="True">

<ContentTemplate>

<asp:UpdatePanel runat="server" ID="updatepanel">

<ContentTemplate>

<br />

<asp:DropDownList ID="DropDown1" runat="server" Width="400px" AutoPostBack="true"

OnSelectedIndexChanged="DropDown1_SelectedIndexChanged">

<asp:ListItem Text="File 1" Value="1"></asp:ListItem>

<asp:ListItem Text="File 2" Value="2"></asp:ListItem>

<asp:ListItem Text="File 3" Value="3"></asp:ListItem>

</asp:DropDownList>

<asp:DropDownList ID="DropDown2" runat="server" Width="400px" Visible="false" onChange="showLoadButton()">

<asp:ListItem Text="A" Value="A"></asp:ListItem>

<asp:ListItem Text="B" Value="B"></asp:ListItem>

<asp:ListItem Text="C" Value="C"></asp:ListItem>

</asp:DropDownList>

<asp:Button ID="LoadData" runat="server" Text="Load" OnClick="LoadData_Click" CssClass="hidebutton" />

<asp:HiddenField ID="hdn" runat="server" Value="" />

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="updatepanel" runat="server">

<ProgressTemplate>

<asp:Panel ID="Panel1" CssClass="overlay" runat="server">

<asp:Panel ID="Panel2" CssClass="loader" runat="server">

<img alt="Loading..." src="/images/ajax-loader.gif" />

</asp:Panel>

</ProgressTemplate>

</asp:UpdateProgress>

</ContentTemplate>

</telerik:RadWindow>

<script language="javascript" type="text/javascript">

if (window.addEventListener) // W3C standard

{

window.addEventListener('load', load, false);

}

else if (window.attachEvent) // Microsoft

{

window.attachEvent('onload', load);

}

function CloseWindow() {

var oWindow = $find("<%= RadWindow1.ClientID %>");

oWindow.Close();

}

function showLoadButton() {

oLoadButton = document.getElementById('<%=LoadData.ClientID %>');

oLoadButton.style.visibility = "visible";

}

function openWin() {

var oWnd = GetRadWindow();

oWnd.show();

}

function GetRadWindow() {

var oWindow = $find("<%= RadWindow1.ClientID %>");

return oWindow;

}

function EndRequestHandler() {

var hdn = document.getElementById('<%= hdn.ClientID %>');

if (hdn.value == "1") {

var t = setTimeout("CloseWindow()", 100);

hdn.value = "";

}

function load() {

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

}

</script>

UserControl Code Behind

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace Test

{

public partial class RadWindowTest : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void DropDown1_SelectedIndexChanged(object sender, EventArgs e)

{

DropDownList DropDown2 = (DropDownList)RadWindow1.ContentContainer.FindControl("DropDown2");

DropDown2.Visible = true;

}

protected void LoadData_Click(object sender, EventArgs e)

{

RadWindow1.DestroyOnClose = true;

HiddenField hdn = (HiddenField)RadWindow1.ContentContainer.FindControl("hdn");

hdn.Value = "1";

}

I can remove the UpdateProgress in this example and it would work, but I need the progress to show on the screen. In my more complicated implementation I have a RadGrid inside the RadWindow and it will complain about duplicate controls as well. Also, if I remove my UpdateProgress here "to get it working", when I do a postback the RadWindow closes and I need to reopen it manually. How do I keep it open after the postback? This doesn't happen if I don't have the outter UpdatePanel.

Thanks!
Gilbert

3 Answers, 1 is accepted

answered on 09 Aug 2010, 02:52 PM

Hi Gilbert,

I see in your code that you have wrapped the entire RadWindow inside an update panel. Please, note, that when you use a RadWindow with ContentTemplate it moves elements in the DOM and this action is not supported by AJAX since it uses innerHTML - this is how the things in general work. Furthermore, if you update the whole RadWindow it is expected that it will close because it was created and open on the client and you should recreate and reopen it. At last, it is not valid to use the DestroyOnClose property with value true when the content is on the same page because this will destroy the inner controls and you should recreate them.

This being said, what I can suggest is to remove the outermost update panel with ID upd and if you need to update the label you should wrap it only in a separate update panel with UpdateMode="Conditional" and update it when needed by using the method Update().

Sincerely yours,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 18 Aug 2010, 04:59 PM

Hi Svetlina,

Thanks for the reply. The code I put there was really just an small working example to show the error I'm getting. It is very similar to this thread that I found.

http://www.telerik.com/community/forums/aspnet-ajax/window/radwindow-with-contenttemplate-inside-radupdatepanel.aspx

My RadWindow is also in a usercontrol and the main form is wrapped in an UpdatePanel so I cannot do a seperate UpdatePanel with UpdateMode="Conditional". Sorry for not being clearer. From your suggestion there, it looks like it is what I have done here, putting an UpdatePanel around the content of the RadWindow.

Any suggestion on how to stop the duplication error from here?

As for closing and reopening on postback, does this mean that I will need to trigger a client script on load to open the window again in order to have it remain open?

Thanks,
Gilbert

answered on 23 Aug 2010, 02:22 PM

Hi Gilbert,

I recommend you to apply one of these solutions:

Use a RadToolTip instead of RadWidniow. The ToolTip's RenderInPageRoot property controls where the tooltip's client-side object will be added. In your case you should set value "false" to that property (it is false by default)
Move the RadWindow control outside of the partially updated region and wrap its content in an RadAjaxpanel for example in order to avoid full postback, In this case you will solve the problem with the closing RadWindow ("...when I do a postback the RadWindow closes and I need to reopen it manually..") as well.

I hope this helps.

Best wishes,
Fiko
the Telerik team