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

RadAjaxLoadingPanel in Site.Master

6 Answers 135 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
STEVEN
Top achievements
Rank 1
STEVEN asked on 23 Jul 2011, 11:48 AM
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.

6 Answers, 1 is accepted

Sort by
0
Genti
Telerik team
answered on 26 Jul 2011, 11:04 AM
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!

0
STEVEN
Top achievements
Rank 1
answered on 28 Jul 2011, 02:35 AM
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?
0
Genti
Telerik team
answered on 28 Jul 2011, 11:39 AM
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.

0
STEVEN
Top achievements
Rank 1
answered on 02 Aug 2011, 10:25 AM
Thanks, my doubts are cleared
0
Katrenia
Top achievements
Rank 1
answered on 08 May 2012, 06:00 PM

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

 

 

 

 

 

0
Eyup
Telerik team
answered on 11 May 2012, 02:32 PM
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.
Tags
Ajax
Asked by
STEVEN
Top achievements
Rank 1
Answers by
Genti
Telerik team
STEVEN
Top achievements
Rank 1
Katrenia
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or