converting an updatePanel to TELERIK

4 posts, 0 answers
  1. Tyler
    Tyler avatar
    64 posts
    Member since:
    Nov 2013

    Posted 13 Mar 2015 Link to this post

    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));

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2093 posts

    Posted 18 Mar 2015 Link to this post

    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.

     
  3. Allen
    Allen avatar
    89 posts
    Member since:
    Mar 2011

    Posted 09 Aug 2019 Link to this post

    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>

           

     

     

  4. Rumen
    Admin
    Rumen avatar
    14374 posts

    Posted 12 Aug 2019 Link to this post

    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.
Back to Top