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

converting an updatePanel to TELERIK

3 Answers 78 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ruairi
Top achievements
Rank 1
Ruairi asked on 13 Mar 2015, 02:44 PM
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));

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 18 Mar 2015, 12:05 PM
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:
Regards,
Ivan Danchev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Allen
Top achievements
Rank 2
Iron
Veteran
answered on 09 Aug 2019, 01:35 PM

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>

       

 

 

0
Rumen
Telerik team
answered on 12 Aug 2019, 10:33 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
PanelBar
Asked by
Ruairi
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Allen
Top achievements
Rank 2
Iron
Veteran
Rumen
Telerik team
Share this question
or