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

AjaxLoadingPanel: central little animation missing

6 Answers 86 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Damien
Top achievements
Rank 1
Damien asked on 20 Dec 2012, 03:29 PM
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 

6 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 25 Dec 2012, 09:29 AM
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.
0
Damien
Top achievements
Rank 1
answered on 03 Jan 2013, 01:18 PM
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
0
Eyup
Telerik team
answered on 08 Jan 2013, 09:31 AM
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.
0
Damien
Top achievements
Rank 1
answered on 08 Jan 2013, 12:53 PM
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


0
Eyup
Telerik team
answered on 11 Jan 2013, 06:58 AM
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.
0
Damien
Top achievements
Rank 1
answered on 12 Feb 2013, 09:58 AM
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>
Tags
Ajax
Asked by
Damien
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Damien
Top achievements
Rank 1
Share this question
or