converting an updatePanel to TELERIK

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    46 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
    830 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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top