converting an updatePanel to TELERIK

[Ruairi]

Using ASP.Net webforms I have a pop up containing 2 tabs, which display info on a feature, 'FEATURE PROPERTIES' and 'IMAGES'. Each time a new feature is clicked the pop up is updated with the new feature details.

I was making the call back to the server where updatePanel8 was being updated. Unfortuantelly I am trying to convert my website to telerik and I am having difficulties implenting this. I have read many Q's on telerik forms some suggest trying RadAjaxPanel others suggest tryiing RadAjaxManager, but either way I cant seem to get it working as I cant use an update panel inside a panel when I am using telerik.

<asp:Panel ID="ViewFeatureProperties" runat="server" BackColor="Snow" Width="300"
               HorizontalAlign="Center">
               <asp:UpdatePanel runat="server" ID="UpdatePanel8" UpdateMode="Conditional" ChildrenAsTriggers="true"
                   Style="position: relative; overflow: hidden; background-color: White;
                  width: 300px; height: 300px; margin: 5px; text-align: center; outline-style: none; overflow-y: hidden; overflow-x:hidden;">

                   <ContentTemplate>
                           <div id="DivHolding2Tabs" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb" style="width:100%;border-color:Black;border-width:1px;border-style:solid;">
                               <ul id="tabList" style="width:100%">
                                   <li><a href="#tabs-1">Info</a> </li>
                                   <li><a href="#tabs-2" style="display:none;">Images</a> </li>
                               </ul>

                               <div id="tabs-1" class="WorkFlowLayout">
                                       <b><font color="FF6600">Feature Properties </font></b>
                                        <div id="divFeatureInfo" runat="server">
                                        </div>
                               </div>

                               <div id="tabs-2" class="WorkFlowLayout">
                                        <b><font color="FF6600">Images</font></b>
                                        <div id="ImagesRelatingToFeatureDIV" runat="server">
                                       </div>
                               </div>
                           </div>
                           <br />
                           <br />
                           <div class="buttonwrap">
                               <span id="Span5" class="ActionBtns">
                                   <asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Style="display: none;
                                       visibility: hidden;" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                               </span>
                           </div>

                   </ContentTemplate>
                   <Triggers>
                       <asp:AsyncPostBackTrigger ControlID="ViewFeatureWorkflowImagePostBackBtn" EventName="Click" />
                   </Triggers>
               </asp:UpdatePanel>
           </asp:Panel>

**CODE BEHIND**<br>protected void ViewFeatureWorkflowImagePostBackBtn_Click(object sender, EventArgs e)<br>{<br>ReloadUploadedImagesForFeatureWorkflow();<br>}<br><br><br>private void ReloadUploadedImagesForFeatureWorkflow()<br>{<br>//generate the new details for the popup<br>UpdatePanel8.Update();<br>script.Append("OpenPropertiesPopUp();");<br><br>ScriptManager.RegisterClientScriptBlock(UpdatePanel8,                                                        UpdatePanel8.GetType(),                                             "OpenPropertiesPopupCall()",<br>script.ToString(),<br>true);<br>}

Some exmaples I have tried are:

<asp:Panel ID="Panel1" runat="server">
                    <div id="Div1" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb"
                         style="width: 100%; border-color: Black; border-width: 1px; border-style: solid;">

                     <asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Text="Update the first Panel" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                     <asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>


                         <ul id="Ul1" style="width: 100%">
                             <li><a href="#tabs-1">Info</a> </li>
                             <li><a href="#tabs-2" style="display: none;">Images</a> </li>
                         </ul>
                         <div id="tabs-1" class="WorkFlowLayout">
                             <b><font color="FF6600">Feature Properties </font></b>
                             <div id="divFeatureInfo" runat="server">
                             </div>
                         </div>
                         <div id="tabs-2" class="WorkFlowLayout">
                             <b><font color="FF6600">Images</font></b>
                             <div id="ImagesRelatingToFeatureDIV" runat="server">
                             </div>
                         </div>
                     </div>
                     <br />
                     <br />
                     <div class="buttonwrap">
                         <span id="Span6" class="ActionBtns">
                             <asp:Button ID="Button2" runat="server" Style="display: none; visibility: hidden;"
                                 OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                         </span>
                     </div>

     </asp:Panel>
     <br />

        <telerik:radajaxloadingpanel id="RadAjaxLoadingPanel2" runat="server" skin="Default"></telerik:radajaxloadingpanel>

code behind UpdatePanel8.AjaxRequest;

// UpdatePanel8.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", UpdatePanel8.ClientID));

[Ivan Danchev]

Hello,

You can try wrapping the controls you want to be updated in a RadAjaxPanel. This would allow the nested controls to be updated with partial postbacks instead of full postbacks. You don't need to wrap the controls in a RadAjaxPanel and asp:UpdatePanel at the same, because their purpose is the same. Just replace your UpdatePanel with a RadAjaxPanel.

Unlike the RadAjaxPanel or the asp:UpdatePanel, the RadAjaxManager control does not work by wrapping other controls. It allows to specifically set the updating and updated controls regardless of their position on the page. Note that, in order to avoid conflicts, a control should not be updated by RadAjaxPanel and RadAjaxManager at the same time.

You can find more information on the RadAjaxPanel and the RadAjaxManager in our documentation on the following links:

• Ajax Panel
• Ajax Manager

Regards,
Ivan Danchev
Telerik

 

 

[Allen]

This may be a somewhat orthogonal comment, but I have recently experienced some nastiness with an ASP UpdatePanel on a page where the RadAjaxManager is used.  When the page was instantiated, the ASP UpdatePanel was wrapped with an injected RadAjaxPanel whose default display style was display: block, except, the whole page was supposed to be using Flex.  Any attempts to style the ASP UpdatePanel to use flex were blown away by the injected RadAjaxPanel.

So, I followed the advice above and swapped the ASP UpdatePanel for a RadAjaxPanel, applied the styles and what not as desired, and the whole thing magically healed itself.  The takeaway is that it appears to be better to not mix and match Ajax related stuff on a page.  So if using RadAjaxManager, any UpdatePanel it references should be a RadAjaxPanel.

IS THIS CORRECT?

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="AjaxLoadingPanel1">
         <AjaxSettings>
             <telerik:AjaxSetting AjaxControlID="ValidationResultsPanel1">
                 <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="ValidationResultsPanel1" />
                 </UpdatedControls>
             </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="RadButtonAcceptAll">
                 <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="RadButtonAcceptAll" />
                     <telerik:AjaxUpdatedControl ControlID="ValidationResultsPanel1" />
                 </UpdatedControls>
             </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="RadButtonSubmit">
                 <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="RadButtonSubmit" />
                     <telerik:AjaxUpdatedControl ControlID="ValidationResultsPanel1" />
                 </UpdatedControls>
             </telerik:AjaxSetting>
         </AjaxSettings>
     </telerik:RadAjaxManager>

...
<div class="flex-parent cell-100">
            <telerik:RadAjaxPanel ID="ValidationResultsPanel1" runat="server"
                Style="display: flex; margin-left: 10px; margin-right: 10px;"
                CssClass="flex-parent cell-100" BorderColor="Red" BorderStyle="Solid"
                ScrollBars="Auto" HorizontalAlign="Left" Width="99%" BorderWidth="2px">
                <%--  <asp:Panel ID="ValidationResultsPanel1" runat="server" Style="display: flex; width:100%; margin-left:10px; margin-right:10px;" CssClass="flex-parent cell-100" BorderColor="Red" BorderStyle="Solid"
                ScrollBars="Auto" HorizontalAlign="Left" Width="99%" BorderWidth="2px">--%>
                <asp:HiddenField ID="hfld_ValidationInspectionIds" runat="server" />
                <asp:HiddenField ID="hfld_mwe2ikey" runat="server" />
                <asp:HiddenField ID="hfld_bridge_id" runat="server" />
                <asp:HiddenField ID="hfld_roadway_id" runat="server" />
                <asp:HiddenField ID="hfld_inspection_id" runat="server" />

                <!-- ARMarshall, ARM LLC - 20150621 - added -->
                <uc1:ValidationResultsView ID="ValidationResultsView1" runat="server" Style="width: 100%;" />
                <%--</asp:Panel>--%>
            </telerik:RadAjaxPanel>

       

 

 

[Rumen]

Hi Allen,

It is recommended to use a single control for Ajaxification of the page, fragments of the page or controls - use only RadAjaxManager, or RadAjaxPanel(s) or an UpdatePanel(s). 

The best practices do not allow mixing and using RadAjaxManager and RadAjaxPanel at the same time. The same is true for the asp:UpdatePanel, which is similar to RadAjaxPanel. 

This is explained in detail at Controls Wrapped in AjaxPanel and Added to AjaxManager Settings.

I hope this helps.

Regards,
Rumen
Progress Telerik