RadAjaxLoadingPanel in Site.Master

7 posts, 0 answers
  1. STEVEN
    STEVEN avatar
    37 posts
    Member since:
    Oct 2010

    Posted 23 Jul 2011 Link to this post

    Hi,

    I am looking for an easy way to ajaxify all the rad controls in a master/child web application.
    So I have this in the site.master page:
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="cpMain">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="cpMain" 
                                                    LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
                                     Skin="Sitefinity" />

    ....
        <asp:ContentPlaceHolder ID="cpMain" runat="server">
        </asp:ContentPlaceHolder>

    However, it ajaxify everything but I am unable to see the RadAjaxLoadingPanel1 running.
    Please advise.

  2. Genti
    Admin
    Genti avatar
    107 posts

    Posted 26 Jul 2011 Link to this post

    Hi Steven,

    Thank you for contacting us.
    In such case you can wrap the ContentPlaceHolder with a Panel control and then Ajaxify the Panel.
    I.e
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="myPanel">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="myPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
     
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Sitefinity" />
     
            <asp:Panel runat="server" ID="myPanel">   
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </asp:Panel>


    Hope this helps.

    All the best,
    Genti
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. STEVEN
    STEVEN avatar
    37 posts
    Member since:
    Oct 2010

    Posted 27 Jul 2011 Link to this post

    Thanks it works.

    Another question.

    Given a form like this:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="radDatePickerDateOfOccurance">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="txtBoxMonthOfOccurance" 
                                                    LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="radComboBoxIssueCategory">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="radComboBoxIssueSubCategory" 
                                                    LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="cboAccount">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="cboAccount"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="cboOdm">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="cboOdm"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
    and 20 other input controls...

    Is it better to put them into a Panel control and Ajaxify the Panel or better to leave them as in above snippets?
    Which is better in terms of responsiveness? Or are they the same and I should put into a Panel for lesser coding?
  4. Genti
    Admin
    Genti avatar
    107 posts

    Posted 28 Jul 2011 Link to this post

    Hi Steven,

    Thank you for contacting us.

    When you Ajaxify you controls in the same way that you are showing in your code snippet the AjaxManager is going to wrap each of your updated controls with UpdatePanels. This way you would have many UpdatePanels generated, but on the other side the user experience might be better.

    On the other side, if you group all the controls inside a Panel and then ajaxify the Panel, only one UpdatePanel is going to be created. This way you write less code, but at the same time you have less control on the way things get updated as every control inside the Panel would initiate an AjaxRequest.

    In terms of responsiveness, they might not have a big difference as long as you do not have many controls(this means much HTML to render). However, in the scenario that you presented they might be even faster. The reason behind that is that the AjaxManager UpdatePanels that get generated have their UpdateMode set to Conditional. So, when the response comes only a small portion of the HTML needs to be Rendered by the Browser. Otherwise, if you were to wrap your controls inside a panel, then more HTML would need to be Rendered so the time required would be greater.

    Hope this helps.

    Regards,
    Genti
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  5. STEVEN
    STEVEN avatar
    37 posts
    Member since:
    Oct 2010

    Posted 02 Aug 2011 Link to this post

    Thanks, my doubts are cleared
  6. Katrenia
    Katrenia avatar
    1 posts
    Member since:
    Aug 2011

    Posted 08 May 2012 Link to this post

    Hi Genti,

    I have done what you have suggested however, I am not able to see the loading mask.  The only difference is my code is in a telerik radpane.  Can you please give me some guidance as to how to handle this.  Also if I change the <asp:Panel> to <asp:UpdatePanel>, it shows the mask but there are still some issues there.  I assume it because you should let the radajaxmanager handle ajaxifying the control instead of using the updatePanel.

     

     

     

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var currentLoadingPanel = null; 
            var currentUpdatedControl = null; 
      
            function RequestStart(sender, args) { 
                currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>"); 
                currentUpdatedControl = "<%= UpdatePanel1.ClientID %>"; 
                //show the loading panel over the updated control
                currentLoadingPanel.show(currentUpdatedControl); 
            }
            function ResponseEnd() { 
                //hide the loading panel and clean up the global variables 
                if (currentLoadingPanel != null) 
                    currentLoadingPanel.hide(currentUpdatedControl);
      
                    currentUpdatedControl = null; 
                    currentLoadingPanel = null; 
            }
        </script>
    </telerik:RadCodeBlock
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="UpdatePanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="UpdatePanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
    </telerik:RadAjaxManager
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Office2007" BackgroundPosition="Center">
    </telerik:RadAjaxLoadingPanel
    <telerik:RadPane ID="MainPane" runat="server" BorderStyle="None" Collapsed="false" Width="100%" Scrolling="None">
        <asp:Panel ID="UpdatePanel1" runat="server">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
        </asp:Panel>
    </telerik:RadPane

     

     

     

     

     

  7. Eyup
    Admin
    Eyup avatar
    3962 posts

    Posted 11 May 2012 Link to this post

    Hi Steven,

    Thank you for getting back to us.

    You are correct - indeed if you are using RadAjaxManager and RadAjaxPanel  or UpdatePanel at the same time, they both are updating the regarding control simultaneously. That can cause unwanted behavior at times. That's why using multiple wrapped RadAjaxPanels, along with UpdatePanel or with RadAjaxManager ( as well as using RadAjaxPanel in RadAjaxManager settings ) is not a supported scenario and we highly recommend to avoid such implementation.

    I have attached a sample Master page application demonstrating two kinds of implementing RadAjaxLoadingPanel:
    • using asp:Panel to wrap the ContentPlaceHolder
    Please give it a look and let me know if you have further requirements or you insist on showing the loading explicitly.

    Could you please clarify the implementation of your RadPane? What do you want to achieve with it? Please note that RadPane cannot exist separately, it always has to be placed inside of a RadSplitter control.  If you provide us more detailed information on your project, we could recommend you a proper approach.

    For additional information on ajaxifying Master/Content pages please refer to this article:
    RadAjax and MasterPage

    I hope this helps. Do not hesitate to contact me if you need further assistance.

    Kind regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top