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

Telerik RadAjaxLoadingPanel - How to change loading image

6 Answers 317 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Tejas
Top achievements
Rank 1
Tejas asked on 13 May 2012, 05:58 AM
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?

6 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 14 May 2012, 05:09 PM
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
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.
0
Tejas
Top achievements
Rank 1
answered on 17 May 2012, 09:54 PM
This doesn't fix the problem. It adds our loading icon/image along with Telerik Default Loading icon
0
Pavlina
Telerik team
answered on 22 May 2012, 04:41 PM
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
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.
0
Tejas
Top achievements
Rank 1
answered on 22 May 2012, 07:04 PM
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?
0
Pavlina
Telerik team
answered on 23 May 2012, 09:07 AM
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
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.
0
Tarang
Top achievements
Rank 1
answered on 30 Aug 2013, 02:55 PM
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>

Tags
General Discussions
Asked by
Tejas
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Tejas
Top achievements
Rank 1
Tarang
Top achievements
Rank 1
Share this question
or