Error: Sys.InvalidOperationException

3 posts, 0 answers
  1. Valeri Hristov
    Valeri Hristov avatar
    40 posts
    Member since:
    Dec 2003

    Posted 16 Jul 2007 Link to this post

    Error: Sys.InvalidOperationException: Two components with the same id 'xxx' can't be added to the application.

    This is a conceptual problem in RadDock. You can reproduce it by creating a simple page, containing the following markup:

    <asp:updatepanel runat="server" id="UpdatePanel1">
      <telerik:raddockzone id="RadDockZone1" runat="server">
       <telerik:raddock id="RadDock1" runat="server" autopostback="true" dockmode="docked">
       <telerik:raddock id="RadDock2" runat="server" autopostback="true" dockmode="docked">

    Now, grab one of the RadDock controls and drag it. When you are dropping it, if you are fast enough and you succeed to grab the other RadDock control without dropping, you will be able to get the exception. On localhost this is quite hard to be fast enough, but on production sites it should be relatively easy for the fastclickers.
    The problem is related to the fact, that when you grab a RadDock control its HTML element is detached from its parent. When you drop a dock, it initiates a postback because of the AutoPostBack property (converted to AJAX call by the UpdatePanel), the UpdatePanel is updated and since on the server it contains the grabbed RadDock control, it adds it to its HTML. On the client it does not contain HTML element for the grabbed dock, its client-side object is not disposed and newly added dock generates the exception.

    Workaround: use UpdatePanel controls with UpdateMode=Conditional. When you are adding/removing RadDock controls from the zone call the UpdatePanel's Update() method to force it to refresh its content. When you are just moving the docks don't call the Update() method and you will avoid the exception.

    This is the only way we were able to reproduce this problem until now. If you can reproduce using different steps, please, open a new support ticket and send us a simple application. I will try to find a workaround or a solution ASAP.

    Valeri Hristov

  2. Abed allateef Qaisi
    Abed allateef Qaisi avatar
    11 posts
    Member since:
    Oct 2009

    Posted 01 Oct 2009 Link to this post

    Hi valeri,


    thanks for your post,


    I have the same problem, I tried to do as you said but unfortinulty the same error exist as you can find in my test Portal:


    Please any advice, I need to fix this issue ASAP.

    this is My content Page HTML Code


    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterThemeWithoutMenu.Master"
        AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="AmazingWork.MyPage" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <link href="/AWDragStyle/Dock.AWDragStyle.css" rel="stylesheet" type="text/css" />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <table style="width: 900px">
                            <asp:Button ID="Button1" runat="server" OnClick="ButtonAddDock_Click" Text="ADD" />
                            <asp:DropDownList ID="DropDownList1" runat="server">
                                <asp:ListItem Value="~/test.ascx"></asp:ListItem>
                                <asp:ListItem Value="~/test2.ascx"></asp:ListItem>
                        <td style="height: 300px">
                            <telerik:RadDockLayout ID="RadDockLayout1" runat="server" OnLoadDockLayout="RadDockLayout1_LoadDockLayout"
                                OnSaveDockLayout="RadDockLayout1_SaveDockLayout" StoreLayoutInViewState="True">
                        <td class="style1" valign="top">
                            <telerik:RadDockZone ID="RadDockZone3" runat="server" Orientation="Horizontal" Width="305px">
                        <td valign="top">
                            <telerik:RadDockZone ID="RadDockZone4" runat="server" Orientation="Horizontal" Width="305px">
                        <td valign="top">
                            <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Horizontal" Width="305px">
        <div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">
            Hidden UpdatePanel, which is used to help with saving state when minimizing, moving
            and closing docks. This way the docks state is saved faster (no need to update the
            docking zones).
            <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">

  3. DevCraft R3 2016 release webinar banner
  4. Pero
    Pero avatar
    1156 posts

    Posted 02 Oct 2009 Link to this post


    Sometimes when a dock is dragged too quickly an AJAX conflict may occur, because a new AJAX request is initiated before even the first one has finished and a new dock with the same id is created and an error occurs. To resolve this problem place a RadAjaxLoadingPanel over the zones to ensure that any previous ajax requests have finished before a new one is initialized.

    For your convenience I have modified the my portal demo to display a LoadingPanel while a partial page update is in progress (I have set Transparency=100 and MinDipsplayTime=10, so the panel is not actually displayed. Do not set the Transparency property and the panel will be shown) . Please find it attached to the thread.

    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top