Telerik RadAjaxLoadingPanel - How to change loading image

[Ashok]

We are using latest Telerik control with Office2007 Theme. We would like to change loading image of this Theme. How can we achieve this? Any css class we need to override or so?

[Pavlina]

Hi Tejas,

You can modify the RadAjaxLoadingPanel control as you would do with a normal template. The example below shows how to set an Image inside the RadAjaxLoadingPanel:

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Width="256px" Height="64px">
    <asp:Image ID="Image1" runat="server" Width="224px" Height="48px" ImageUrl="~/Loading.gif">
    </asp:Image>
</telerik:RadAjaxLoadingPanel>

Please give it a try and let us know if you need additional assistance.

Regards,
Pavlina
the Telerik team

[Ashok]

This doesn't fix the problem. It adds our loading icon/image along with Telerik Default Loading icon

[Pavlina]

Hello Tarang,

Did you use RadAjaxManager or MS UpdatePanel in your project? Can you also provide the RadAjaxLoadingPanel declaration, so we can test your approach on our side and advice you further.

All the best,
Pavlina
the Telerik team

[Ashok]

Thanks. Setting EnableEmbeddedSkins="false" fixes the issue.

With Embedded image it was always in the center of the page. With custome image it doesn't appear in the center. How do we do that?

[Pavlina]

Hi Tejas,

You can refer to the help article below for more information about how to center the loading panel on the page:
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

Greetings,
Pavlina
the Telerik team

[Tarang]

Setting  EnableEmbeddedSkins="false" does not work for me. I've two images currently displayed on my screen.

However I am showing custom image in the center like this:

<telerik:RadScriptBlock ID="rtsb" runat="server">
            <script type="text/javascript">
                Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (sender, e) {

                    $get("<%= appLoadingPanel.ClientID %>").style.height = document.documentElement.clientHeight + "px";

                    if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
                        $get("<%= appLoadingPanel.ClientID %>").style.height = document.documentElement.scrollHeight + "px";
                    }
                    var img = $get("<%= imgLoadingPanel.ClientID %>");
                    $.showInCenter(img);
                });

$.showInCenter = function (ctrl) {
    posY = $.getScrollOffset() + ($.getInnerHeight() / 2) - (ctrl.height / 2);
    posX = document.documentElement.clientWidth / 2 - (ctrl.width / 2);
    $(ctrl).css({ position: "relative", top: posY + "px", left: posX + "px" });
};

$.getInnerHeight = function () {
    var y;
    if (self.innerHeight) // all except Explorer
        y = self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight)
        y = document.documentElement.clientHeight;
    else if (document.body) // other Explorers
        y = document.body.clientHeight;
    return (y);
};

$.getScrollOffset = function () {
    var y;
    if (self.pageYOffset)
        y = self.pageYOffset;
    else if (document.documentElement && document.documentElement.scrollTop)
        y = document.documentElement.scrollTop;
    else if (document.body)
        y = document.body.scrollTop;
    return (y);
};
            </script>
        </telerik:RadScriptBlock>