Telerik RadAjaxLoadingPanel - How to change loading image

7 posts, 0 answers
  1. Tejas
    Tejas avatar
    75 posts
    Member since:
    Mar 2011

    Posted 13 May 2012 Link to this post

    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?
  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 14 May 2012 Link to this post

    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.
  3. Tejas
    Tejas avatar
    75 posts
    Member since:
    Mar 2011

    Posted 17 May 2012 Link to this post

    This doesn't fix the problem. It adds our loading icon/image along with Telerik Default Loading icon
  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 22 May 2012 Link to this post

    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.
  5. Tejas
    Tejas avatar
    75 posts
    Member since:
    Mar 2011

    Posted 22 May 2012 Link to this post

    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?
  6. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 23 May 2012 Link to this post

    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.
  7. Tarang
    Tarang avatar
    11 posts
    Member since:
    Jun 2013

    Posted 30 Aug 2013 Link to this post

    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>

Back to Top