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

Duplicate Ids in RadAjaxPanel and AjaxUpdatedControl

4 Answers 20 Views
Window
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 29 Mar 2021, 03:44 AM
<rad:RadAjaxPanel ID="AjaxDetails" runat="server" ClientEvents-OnResponseEnd="afterAjax" LoadingPanelID="LoadingPanel1"><br>    <asp:Label ID="lblError" runat="server" Visible="false" ForeColor="Red" Font-Bold="true" style="margin-left:8px;" /><br>    <table width="908px" cellpadding="0"  cellspacing="0" border="0" style="margin-left:8px;"><br>    <tr><br>        <td class="fieldNameBefore formcol_3"><dash:LocResource ID="LocResource5" ResourceName="FlyingTitle" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_2" colspan="3"><asp:TextBox ID="txtTitle" runat="server" Text="" style="width:740px"/></td><br>    </tr><br>    <tr><br>        <td class="fieldNameBefore formcol_4"><dash:LocResource ID="LocResource111" ResourceName="Product" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_5"><br>            <rad:RadComboBox ID="selProduct" runat="server" Skin="Vista" Width="250px" <br>                Height="200" ExpandAnimation-Type="None" CollapseAnimation-Type="None"<br>                AllowCustomText="false" <br>                DataTextField="ProductName"<br>                DataValueField="ProductId"<br>                OnClientSelectedIndexChanged="productSelect"<br>                AppendDataBoundItems="true"><br>                    <Items><br>                    </Items><br>                </rad:RadComboBox><br>                <asp:TextBox ID="txtProductName" runat="server" Text="" style="width:250px" Visible="false" ReadOnly="true"/><br>        </td><br>        <td class="fieldNameBefore formcol_4444"><dash:LocResource ID="LocResource77" ResourceName="Active" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_45555"><br>            <asp:CheckBox ID="chkActive" runat="server" /><asp:TextBox runat="server" ID="txtActive" ReadOnly="true" Visible="false" CssClass="readOnlyText"></asp:TextBox><br>        </td><br>    </tr><br>    <tr><br>        <td class="fieldNameBefore formcol_3"><dash:LocResource ID="LocResource99" ResourceName="TemplatePreview" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_2" colspan="3"><br>            <div id="divTemplatePreview" class="previewTextArea" runat="server" style="width:735px;margin-bottom:5px;height:230px;overflow:scroll;"></div><br>        </td><br>    </tr><br></rad:RadAjaxPanel><br><div id="divCommunicationOuter" runat="server" visible="false"><br>    <div class="formSubSectionName"><dash:LocResource ID="LocResource111111" ResourceName="FlyingCommunications" runat="server" /></div><br>    <div id="divCommunicationList" style="margin-right:8px;width:400px;height:300px;overflow:hidden;float:left;"><br>        <rad:RadAjaxPanel runat="server" ID="ActivityListPanel" LoadingPanelID="LoadingPanel2" ClientEvents-OnResponseEnd="selectFirstCommunication"><br>            <rad:RadGrid ID="GridCommunication" Skin="Vista"<br>                EnableEmbeddedSkins="false"<br>                AllowSorting="False"<br>                ShowFooter="False" <br>                EnableAJAX ="true"<br>                ShowHeader="False"<br>                AllowPaging="False" <br>                AutoGenerateColumns="false"<br>                runat="server"<br>                GridLines="Both"<br>                Width="400px"<br>                ><br>                <MasterTableView ClientDataKeyNames="FlyingCommunicationId" Width="400px"><br>                    <Columns><br>                        <rad:GridTemplateColumn UniqueName="TemplateColumn" ItemStyle-CssClass="activityRow"><br>                            <ItemStyle Width="350" /><br>                            <ItemTemplate><br>                                <span style="font-weight:bold;">1</span><br /><br>                                <span style="width:350px; overflow:hidden">2</span><br>                             </ItemTemplate><br>                         </rad:GridTemplateColumn><br>                    </Columns><br>                </MasterTableView><br>                <ClientSettings><br>                    <Scrolling AllowScroll="true" ScrollHeight="300px"></Scrolling><br>                    <Selecting AllowRowSelect="true"></Selecting><br>                    <ClientEvents OnRowSelected="communicationSelected" OnGridCreated="communicationLoaded" /><br>                </ClientSettings><br>            </rad:RadGrid><br>            <div style="display:none;"><br>                <asp:Button ID="btnRefreshCommunicationList" runat="server" OnClick="LoadCommunicationList" /><br>                <asp:TextBox ID="txtFlyingIDComm" runat="server" style="display:none"/><br>            </div><br>        </rad:RadAjaxPanel><br>    </div><br>    <rad:RadToolBar Skin="Vista" runat="server" ID="ToolbarCommunication" OnClientButtonClicked="toolbar_handler" style="width:526px;" EnableEmbeddedSkins="false"><br>        <Items><br>            <rad:radtoolbarbutton Tooltip="Add Communication" Value="newcommunication" CommandName="newcommunication" Text="Add Communication" ImageUrl="~/images/toolbar/2.png"  /><br>            <rad:radtoolbarbutton Enabled="false" Tooltip="Edit Communication" Value="editcommunication" CommandName="editcommunication" Text="Edit Communication" ImageUrl="~/images/toolbar/3.png"  /><br>        </Items><br>    </rad:RadToolBar><br>    <div id="divCommunicationDetail" style="width:526px;height:300px;overflow:scroll;float:left;"><br>        <rad:RadXmlHttpPanel runat="server" ID="CommunicationDetailPanel" OnServiceRequest="LoadCommunication" LoadingPanelID="LoadingPanel2" Value="" ><br>                <div id="divCommunicationDetailInner" runat="server" style="padding:5px;"><br>                </div><br>                <asp:TextBox ID="txtFlyingCommunicationID" runat="server" style="display:none;" /><br>        </rad:RadXmlHttpPanel><br>    </div><br>    <div style="clear:both"></div><br></div><br><br><rad:RadAjaxManager ID="RadAjaxManager1" runat="server"><br>    <AjaxSettings><br>    <rad:AjaxSetting AjaxControlID="btnUpdateList"><br>        <UpdatedControls><br>            <rad:AjaxUpdatedControl ControlID="gridFlyings" LoadingPanelID="LoadingPanel1" /><br>        </UpdatedControls><br>    </rad:AjaxSetting><br>        <rad:AjaxSetting AjaxControlID="btnLoadPreview"><br>            <UpdatedControls><br>                <rad:AjaxUpdatedControl ControlID="divTemplatePreview" LoadingPanelID="LoadingPanel2" /><br>            </UpdatedControls><br>        </rad:AjaxSetting><br>    </AjaxSettings><br></rad:RadAjaxManager>

 

 

I use AjaxUpdatedControl to update divTemplatePreview with LoadingPanel2. But the resulting HTML codes contain duplicate <div> for id = ctl00_ContentArea_ctl00_ContentArea_divTemplatePreviewPanel as follows.

 

 

<p><div class="RadAjaxPanel" id="ctl00_ContentArea_ctl00_ContentArea_divTemplatePreviewPanel" style="display: block;"><br>                <div id="ctl00_ContentArea_divTemplatePreview" class="previewTextArea" style="width:735px;margin-bottom:5px;height:230px;overflow:scroll;"></div><br>           </div></p><p></p><p><div class="RadAjaxPanel" id="ctl00_ContentArea_ctl00_ContentArea_divTemplatePreviewPanel"></div></p>

4 Answers, 1 is accepted

Sort by
0
Joshua
Top achievements
Rank 1
answered on 29 Mar 2021, 03:57 AM

Formatted codes are shown as follows.

0
Joshua
Top achievements
Rank 1
answered on 29 Mar 2021, 03:59 AM
The resulting code is shown as follows, which contains duplicate ids.
0
Attila Antal
Telerik team
answered on 31 Mar 2021, 01:49 PM

Hi Joshua,

The issue is likely coming from the Nested AJAX panels because both AjaxManager and AjaxPanel are used to enable AJAX which is not supported, see Controls Wrapped in AjaxPanel and Added to AjaxManager Settings

Choose one of the Two and use only that to enable AJAX for the Controls. For an in-depth explanation of how the RadAjax controls work, check out the Understanding AJAX Controls Knowledge-Base article.

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Joshua
Top achievements
Rank 1
answered on 01 Apr 2021, 06:27 AM
Thanks
Tags
Window
Asked by
Joshua
Top achievements
Rank 1
Answers by
Joshua
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or