AjaxLoadingPanel: central little animation missing

7 posts, 0 answers
  1. Damien
    Damien avatar
    17 posts
    Member since:
    Dec 2012

    Posted 20 Dec 2012 Link to this post

    Hello,

    I have a RadAjaxLoadingPanel with a Telerik skin.

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
                   InitialDelayTime="0" MinDisplayTime="500"
                   Transparency="50" BackgroundPosition="Center" Skin="Telerik" />

    When an update is done, I see the loading panel displayed over my control, but the little gif central animation is missing.

    As you can see in the attached png file (in the red cercle I added), we can see the place of the animation (the position seems to be good), but  there is no animation.

    Should I have to define explicitly the gif file ? I thought it is done by chosing a skin.

    Thanks by advance.

    Damien 
  2. Eyup
    Admin
    Eyup avatar
    3795 posts

    Posted 25 Dec 2012 Link to this post

    Hi Damien,

    The loading panel icon should be displayed automatically. I am afraid we are not able to replicate the issue locally. Could you reproduce this behavior with any of our demos?
    http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx

    Please provide us the exact steps to reproduce the issue or open a support ticket to send us a sample runnable application demonstrating the erratic behavior. Thus, we will be able to further analyze the problem and provide a proper solution.

    Greetings,
    Eyup
    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. Damien
    Damien avatar
    17 posts
    Member since:
    Dec 2012

    Posted 03 Jan 2013 Link to this post

    Hello and thank you Eyup for your response.

    I can't reproduce the problem with the online demos.

    Here is the steps to reproduce the issue:

    1 - I create in Visual Studio a new RadControlWebSite project.

    2 - In the Default.aspx file, I remove the RadAjaxManager
    <%--    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>--%>

    3 - In the Default.aspx file, I add a RadAjaxLoadingPanel (skin Telerik) and a RadAjaxPanel containing a RadGrid and a button. the button is here to allow to see the loading panel on the radpanel.
    <div>
     
          <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
                                             InitialDelayTime="0" MinDisplayTime="500"
                                             Transparency="50" BackgroundPosition="Top" Skin="Telerik" />
     
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Height="100%" Width="100%">
     
                <div>
                    <telerik:RadGrid ID="RadGrid1" runat="server"
                                     Skin="Telerik"
                                     OnNeedDataSource="RadGrid1_NeedDataSource">
                    </telerik:RadGrid>
     
                    <asp:Button ID="button1" Text="Click me to see the loading panel" runat="server" />
                </div>
        </telerik:RadAjaxPanel>
     
    </div>

    - In Default.aspx.cs file, I add code to build a datasource for the grid (2 columns and 0 rows)
    protected void Page_Load(object sender, EventArgs e)
       {
           if (!this.IsPostBack)
           {
               DataTable myDataTable = new DataTable();
               DataColumn myDataColumn = new DataColumn();
               myDataColumn.ColumnName = "c1";
               myDataTable.Columns.Add(myDataColumn);
               DataColumn myDataColumn2 = new DataColumn();
               myDataColumn2.ColumnName = "c2";
               myDataTable.Columns.Add(myDataColumn2);
               this.RadGrid1.DataSource = myDataTable;
               this.RadGrid1.DataBind();
           }
       }
     
       protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
       {
           DataTable myDataTable = new DataTable();
           DataColumn myDataColumn = new DataColumn();
           myDataColumn.ColumnName = "c1";
           myDataTable.Columns.Add(myDataColumn);
           myDataColumn.ColumnName = "c2";
           myDataTable.Columns.Add(myDataColumn);
           this.RadGrid1.DataSource = myDataTable;
           this.RadGrid1.DataBind();
       }

    When I run the application, the default page displays correctly the grid with 2 columns with no data (no row) and the button.
    When I click on the button, the loading panel is displayed over the global rad panel but, at the place (top) where should be the gif animation, there is an empty area (see the attached file).

    Thanks to say me if you reproduce the problem and what to do to resolve it if something is missing.

    Regards,
    Damien
  4. Eyup
    Admin
    Eyup avatar
    3795 posts

    Posted 08 Jan 2013 Link to this post

    Hi Damien,

    I followed the exact steps and still I am not able to reproduce the issue - the loading icon appears as expected on my end.

    Please note that it is absolutely prohibited to call DataBind() method in NeedDataSource event. Please modify your code-behind as follows:
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        DataTable myDataTable = new DataTable();
        DataColumn myDataColumn = new DataColumn();
        myDataColumn.ColumnName = "c1";
        myDataTable.Columns.Add(myDataColumn);
     
        myDataColumn = new DataColumn();
        myDataColumn.ColumnName = "c2";
        myDataTable.Columns.Add(myDataColumn);
     
        RadGrid1.DataSource = myDataTable;
    }

    I hope this helps. Please give it a try and let me know if it works for you.

    Greetings,
    Eyup
    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. Damien
    Damien avatar
    17 posts
    Member since:
    Dec 2012

    Posted 08 Jan 2013 Link to this post

    Hello Eyup and thanks for your test.

    I tried your code modifications for my small sample but it doesn't work better.

    However, I noticed that I reproduce the problem when I run my small sample on EI8, but it works correctly on Chrome and Firefox.
    But, as I said in a previous reply, I can reproduce the problem with the demos, even with EI8.

    I tried to adapt the sample to be closer to the demos (header, RadAjaxManager, DOCTYPE) but nothing works.

    Any other idea ?

    Regards,

    Damien


  6. Eyup
    Admin
    Eyup avatar
    3795 posts

    Posted 11 Jan 2013 Link to this post

    Hi Damien,

    I have created a sample RadGrid web site using the provided code snippets. On my side everything works as expected and the loading panel is displayed correctly. Please check out the attached application and let me know if I am missing something out to reproduce the issue?

    All the best,
    Eyup
    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. Damien
    Damien avatar
    17 posts
    Member since:
    Dec 2012

    Posted 12 Feb 2013 Link to this post

    Hello,

    I don't understand why the behaviour is different from your application, Eyup.

    I tried to use a template for my loading panel, managing myself the gif image, and it works.
    I finally keep this solution.

    Thanks for your help.

    Damien

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"
                                           InitialDelayTime="0" MinDisplayTime="500"
                                           Transparency="50" >
                  <div style="height:100%; width:100%; background:white;" >
                      <table style="height:100%; width:100%;">
                          <tr>
                              <td style=" text-align:center">
                                  <asp:Image ID="Image1" runat="server" ImageUrl="~/Media/loading5.gif" AlternateText="loading"></asp:Image>
                              </td>
                          </tr>
                      </table>
                  </div>
              </telerik:RadAjaxLoadingPanel>
Back to Top