Set RadAjaxLoadingPanel in master page to control update panel in content page

[TravelMan]

Based on the sample code in telerik demo site, I am able put a RadAjaxLoadingPanel in content page for the update panel. It is working fine and loading image is in the center of screen. Since there have a lot of content pages have similar case, I would like to move RadAjaxLoadingPanel to Master page. Also, the javascript for updatePanel would be moved to master page too. That is meaning, I only have one code base in Master page and apply AjaxLoadingPanel for all content page with UpdatePanel.

Does anyone have idea how to implement this? If it can do, will this still working for content page without update panel?

Here are code I am using in content page.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
    IsSticky="true" BackgroundPosition="Center"
        Transparency="0" Height="60px"
        Width="70px" Skin="Vista">
    </telerik:RadAjaxLoadingPanel>

    <script language="javascript" type="text/javascript">
           function centerUpdatePanel()
            {
                centerElementOnScreen(document.getElementById('<% = RadAjaxLoadingPanel1.ClientID %>'));
            }
            function centerElementOnScreen(element)
            {
                var scrollTop = document.body.scrollTop;
                var scrollLeft = document.body.scrollLeft;
                var viewPortHeight = document.body.clientHeight;
                var viewPortWidth = document.body.clientWidth;
                if (document.compatMode == "CSS1Compat")
                {
                    viewPortHeight = document.documentElement.clientHeight;
                    viewPortWidth = document.documentElement.clientWidth;
                    scrollTop = document.documentElement.scrollTop;
                    scrollLeft = document.documentElement.scrollLeft;
                }
                var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);
                var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);
                var top = scrollTop + topOffset - 40;
                var left = scrollLeft + leftOffset - 70;
                element.style.position = "absolute";
                element.style.top = top + "px";
                element.style.left = left + "px";
            }

        var loadingPanel = "";
        var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
        var postBackElement = "";
        pageRequestManager.add_initializeRequest(initializeRequest);
        pageRequestManager.add_endRequest(endRequest);

        function initializeRequest(sender, eventArgs)
        {
            loadingPanel = $find('<% = RadAjaxLoadingPanel1.ClientID %>');
            postBackElement = eventArgs.get_postBackElement().id;
            loadingPanel.show(postBackElement);
            centerUpdatePanel();
        }

        function endRequest(sender, eventArgs)
        {
            loadingPanel = $find('<% = RadAjaxLoadingPanel1.ClientID %>');
            loadingPanel.hide(postBackElement);
        }
    </script>

   <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
          <ContentTemplate>
.....
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

[Iana Tsolova]

Hello Lei,

I would suggest you to use RadAjaxManager to ajaxify the page content instead of ASP:UpdatePanel. For that purpose you need to add a RadAjaxManager control to the master page and set its DefaultLoadingPanelID to the ID of the RadAjaxLoadingPanel situated on the master page. Then you only need to handle the manager OnRequestStart client-side vent and call there the centerElementOnScreen() method.
In the content pages you can use RadAjaxManagerProxy to set up the desired ajax settings.

Regards,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.