RadAjaxLoadingPanel backgroundposition ignored

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    1 posts
    Member since:
    Feb 2015

    Posted 29 May 2015 Link to this post


     I must be missing something, but I am trying to place RadAjaxLoadingPanel in over the top of the updating control centred vertically and horizontally. But whatever I try the RadAjaxLoadingPanel is just placed in the top left corner of the updating control.

     I.e in the example below the RadAjaxLoadingPanel1 is always displated in the top left corner of Panel1. Any ideas greatfull received.


    <asp:Panel ID=Panel1 runat="server">
        <div id="edit">
            <div class="heading"><asp:Label ID="FormTitle" runat="server"></asp:Label></div>
            <p />
               <table border="1">...</table>
               <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="1" MinDisplayTime="1000" backgroundPosition="center">
                   <asp:Image ID="Image1" runat="server" ImageUrl="../img/ajax-loader.gif" AlternateText="loading">



  2. Viktor Tachev
    Viktor Tachev avatar
    1444 posts

    Posted 02 Jun 2015 Link to this post

    Hi Andrew,

    In order to position the loading image in the center of the panel you can set its position via JavaScript. You can check out the approach in the following online demo.

    In your scenario the markup would look similar to the following:

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <telerik:AjaxSetting AjaxControlID="Panel1">
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
        <ClientEvents OnRequestStart="requestStart" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="1"  MinDisplayTime="1000">
            <asp:Image ID="Image1" runat="server" ImageUrl="../img/ajax-loader.gif" AlternateText="loading" />
    <asp:Panel ID="Panel1" runat="server"  Width="300px" Height="300px" BorderColor="Red" BorderStyle="Solid">
        <asp:Button Text="click me" runat="server" ID="Button1" OnClick="Button1_Click" />

    And the JavaScript:

    function requestStart() {
        var loadingPanel = $telerik.findElement(document, "RadAjaxLoadingPanel1");
        var loadingImage = $telerik.findElement(loadingPanel, "Image1");
        var panel1 = $get("Panel1");
        loadingImage.style.position = "relative";
        loadingImage.style.top = (parseInt(panel1.style.height) / 2) + "px";

    Viktor Tachev
    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 Feedback Portal and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top