RadAjaxLoadingPanel in Site.Master

[STEVEN]

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.

[Genti]

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

[STEVEN]

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?

[Genti]

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

[STEVEN]

Thanks, my doubts are cleared

[Katrenia]

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>

 

 

 

 

 

[Eyup]

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

• using RadAjaxManagerProxy in the ContentPage

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