Access UserControl (with RadGrid) from aspx produces 'Control is already associated with the element’ error message... help

[Dan]

For some months now we have been working on a large .NET application that will serve as the Proposal Development System for our company. Because the methods of developing proposals vary significantly between the Eastern and Western divisions of our company, we have developed some of our pages to display Eastern or Western versions of themselves depending on the location of the user. This is accomplished by first determining the user’s location and then by loading appropriate user controls (.ascx) depending on that location.

In our application we have a web page (.aspx) which, in turn contains an update panel. This update Panel contains a placeholder into which an appropriate user control (Eastern or Western) will eventually be loaded. The main .aspx page also contains a checkbox which, when checked will indicate that some of the buttons on the screen need to be disabled. One of these buttons is actually contained in the user control.

In addition to the button, the .ascx controls also contains a RadGrid. In both Eastern and Western .ascx controls the RadGrids are named WBSGrid.

Finally the .aspx page contains both a ScriptManager ( actually a ScriptManagerProxy, as the actual ScriptManager is contained in our Master Page) and a RadAjaxManager.

 

The Update Panel in the .aspx document is defined as follows:

 

<asp:UpdatePanel ID="WBSUpdatePanel"  runat="server" UpdateMode="Conditional">

    <ContentTemplate> 

        <asp:Panel ID="pnlWBSControls" runat="server"

                   Style="padding: 5px;" 

                   ScrollBars="None">

        <asp:PlaceHolder ID="phPnlWBSControls" runat="server"></asp:PlaceHolder>

        </asp:Panel>

    </ContentTemplate>

    <Triggers>

        <asp:AsyncPostBackTrigger ControlID="ckbLocked" />

     </Triggers>

</asp:UpdatePanel>

 

Notice the placeholder, phpnlWBSControls, where we will load our ascx controls. The trigger is required to allow the contents of the Update Panel to be re-rendered when the trigger changes.   

 

There is also a RadAjaxManager in the .aspx document which references WBSGrid and is defined as follows:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="TeamMembersGrid" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="TeamMembersGrid">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="TeamMembersGrid" />

            </UpdatedControls>

        </telerik:AjaxSetting>

   

        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="WBSGrid" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="WBSGrid">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="WBSGrid" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

 

Here is our problem:

1.       Let’s presume, for the moment, that we start with the checkbox not checked. If, for the life of the event in which the page participates, we do not check it, the page performs flawlessly.

2.       If we check the checkbox, the following problems crop up:

a.       The button we are trying to disable in the user control is disabled. However we also want to hide the Command Item Display of the Grid and this does not happen

b.       We receive an ajaxified error message ‘A Control is already associated with the element’ – we believe the ‘element’ to be the RadGrid from the user control.

c.        If we then attempt (within the same session) to make any alterations within the RadGrid the display becomes corrupted. Essentially all of the headings within the RadGrid are shifted to the far right of the page with all of the rows within the grid being shifted to the far left of the page.

d.       If we try to add a new record to the grid using the Command Item Display that we had tried to hide, the add fails silently and we see the corrupted screen described earlier.

e.       If we leave the checkbox checked, navigate away from the page in question, and come back in with the same transaction, the RadGrid’s rendering and behavior seem to be corrected.

f.         If after doing step e we uncheck the checkbox we receive the error mentioned in step b and the RadGrid reverts back to it’s unusual behavior.

3.       If I comment out the line of code that tries to hide the Command Item Display within the RadGrid, the error message from item c persists but the RadGrid does not get corrupted.

4.       Removing the Triggers note from the Update Panel and/or changing the Update Mode to ‘Always’ does not correct the problem.

Can you suggest a solution?    

[Princy]

Hi Dan,

I am not pretty sure about your required scenario. I hope that you are trying to load different UserControls  inside a Panel on checking a CheckBox in an aspx page. I would suggest ajaxifying the Panel which loads the UserControl using the RadAjaxManager rather than ajaxifying the individual controls inside the UserControl. Here is a sample code.

ASPX:

 <asp:ScriptManager ID="ScriptManager" runat="server" />
            <asp:CheckBox ID="CheckBox1" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"
                runat="server" />
            <asp:Panel ID="Panel1" runat="server">
            </asp:Panel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="CheckBox1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

ASCX1:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl1.ascx.cs"
    Inherits="WebUserControl1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<div style="background-color: Green">
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="true" DataSourceID="SqlDataSource1"
        runat="server">
        <MasterTableView CommandItemDisplay="Top">
        </MasterTableView>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString %>"
        SelectCommand="SELECT [CustomerID], [ContactName] FROM [Customers]"></asp:SqlDataSource>
</div>

ASCX2:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl2.ascx.cs" Inherits="WebUserControl2" %>
<asp:LinkButton ID="LinkButton1" runat="server">Hello</asp:LinkButton>

ASPX.CS:

  private string CurrentControl
    {
        get
        {
            return this.ViewState["CurrentControl"] == null ? string.Empty : (string)this.ViewState["CurrentControl"];
        }
        set
        {
            this.ViewState["CurrentControl"] = value;
        }
    }

    private void LoadMyUserControl(string controlName, Control parent)
    {
        parent.Controls.Clear();
        UserControl MyControl = (UserControl)LoadControl(controlName);
        string userControlID = controlName.Split('.')[0];
        MyControl.ID = userControlID.Replace("/", "").Replace("~", "");
        parent.Controls.Add(MyControl);
        this.CurrentControl = controlName;
    }
    protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
    {

        if (CheckBox1.Checked)
        {

            this.LoadMyUserControl("~/WebUserControl1.ascx", Panel1);
            WebUserControl ctrl = (WebUserControl)this.FindControl("WebUserControl1");
            ((RadTextBox)ctrl.FindControl("RadTextBox1")).Text = "New Text";
            ((RadGrid)ctrl.FindControl("RadGrid1")).MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
        }
        else
        {
            this.LoadMyUserControl("~/WebUserControl2.ascx", Panel1);


        }


    }

Please let me know how it goes..
Princy

[Dan]

Thanks for your suggestion. I tried it and I'm afraid we still have the problem.

Let me explain the situation again. When this aspx page loads our porgram will check to see if the user who is requesting it works in the East or the West. Depending on his location either an Eastern or a Western ascx page will be loaded. After that the same aspx and acsx page will always be used within this session.

but...

each ascx document contains buttons that will need to be either enabled or disabled depending on whether the checkbox in the aspx page is checked or unchecked.

I took the <triggers> element out of the updatepanel and replaced it with an entry in the RadAjaxManager. I left evrything else alone including the UpdatePanel. We still get the same error message.

When I tried to remove the Update Panel altogether the logic that loaded the user control failed. So it would appear that this may not be an option.

[Dan]

We actually had a bit of luck with the issue but we are still having issues. We revised the Panel that contains the User Control (with your radGrid in it) to remove the UpdatePanel:

<asp:Panel ID="WBSInputPanel" runat="server"

Style="padding: 0px; margin-left: 2px; margin-right: 2px;"

CssClass="collapsePanel" Height="0px" BackColor="AliceBlue">

<asp:Panel ID="pnlWBSControls" runat="server"

Style="padding: 5px;"

ScrollBars="None">

<asp:PlaceHolder ID="phPnlWBSControls" runat="server"></asp:PlaceHolder>

</asp:Panel>

</asp:Panel>

Then we revised the RadAjaxManager to include this node:

<telerik:AjaxSetting AjaxControlID="ckbLocked">

 

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="WBSGrid" />

<telerik:AjaxUpdatedControl ControlID="btnUploadExcelOrProject" />

</UpdatedControls>

</telerik:AjaxSetting>

After we did this the 'Control is already associated with the element' message went away. But the RadGrid continues to behave incorrectly, in the manner specified in our earlier post. Furthermore The 'Upload to Excel or Project'  button, now specified in the RadAjaxManager is now rendering on the page in a seperate line directly above the line where it should be. It almost looks as though it is now being rendered in a new <div> tag.

Unfortunately these issues are serious enough that we need to continue to try and find a resolution. Do you have any further suggestions?

(By the way at the end of the day today I will be transferring within my company and will, for present, not be positng to this website. I just want to take a moment to that all of the folks here for their kind and competent support over the past several months. You have made a big difference for us and it is greatly appreciated. I am told that my new employer also makes use of your products so you have probably not heard the last of me! Thanks again.) 

[Sebastian]

Hello Dan,

Thank you for the detailed explanation and for the nice words about our controls.

First, I would like to clarify that you need to use asp Panel instead of asp PlaceHolder for the content user control because RadAjaxManager can identify initiators and updated controls which render html tags (which is not the case with the MS PlaceHolder control).

Provided that this criterion is fulfilled, with setup having the RadAjaxManager and the panels residing on the main page, you merely need to set the panel which wraps the dynamically loaded user controls as updated control through the ajax manager setting:

<telerik:RadAjaxManager id="RadAjaxManager1" runat="server">
<telerik:AjaxSetting AjaxControlID="ckbLocked">
 <UpdatedControls>
  <telerik:AjaxUpdatedControl ControlID="PnlHolderWBSControls" />
 </UpdatedControls>
</telerik:AjaxSetting>
</telerik:RadAjaxManager>

<asp:Panel ID="WBSInputPanel" runat="server" Style="padding: 0px; margin-left:  2px; margin-right: 2px;" CssClass="collapsePanel" Height="0px" BackColor="AliceBlue">
<asp:Panel ID="pnlWBSControls" runat="server"
 Style="padding: 5px;" ScrollBars="None">
  <asp:Panel ID="PnlHolderWBSControls" runat="server"></asp:Panel>
  </asp:Panel>
</asp:Panel>

Thus the entire content of the panel will be updated when the checkbox state changes.

Furthermore, you need to set the UpdatePanelsRenderMode property of RadAjaxManager to Inline in order to keep the inline rendering of the export button or, alternatively, use the UpdatePanelRenderMode property of the ajax setting itself. Also have in mind that you need to explicitly disable the ajax for that button as explained here to export the grid content.

Best regards,
Sebastian
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.