Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Ajax > RadAjaxLoadingPanel Animation Not Spinning

Not answered RadAjaxLoadingPanel Animation Not Spinning

Feed from this thread
  • Han avatar

    Posted on Jan 27, 2012 (permalink)

    Hello,

    I'm using RadAjaxLoadingPanel with a Skin="Windows7".  It works fine when I cliked on a button while retrieving data from a database, but after that, I try to click on the button again or even click on the Next-Previous button on the RadGrid, the animation displays static, without spinning circle.  This is odd.  Can you advise?  Am I missing a setting somewhere?
    Please see the attached file for my code.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head runat="server">
        <title>ITSM User Information</title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <%--Needed for JavaScript IntelliSense in VS2010--%>
                    <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <script type="text/javascript">
                //function export data to Excel
                function onRequestStart(sender, args) {
                    if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0) {
                        args.set_enableAjax(false);
                    }
                }
            </script>
            <br />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" />
            <div style="text-align:center; font-weight:bold; font-size:large">
                User Foundation Data
            </div>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" 
                ClientEvents-OnRequestStart="onRequestStart" 
                LoadingPanelID="RadAjaxLoadingPanel1" EnableHistory="True" 
                HorizontalAlign="NotSet">     
                <div style="text-align:center">
                    <table style="width:100%">
                        <tr>
                            <td style="width:32%"></td>
                            <td style="width:10%; text-align:center">
                                <asp:Button ID="btUpdate" runat="server" Text="Collect Data" Font-Bold="true" 
                                    onclick="btUpdate_Click" />
                            </td>
                            <td style="width:10%; text-align:center">
                                <asp:Button ID="btAccept" runat="server" Text="Accept" Font-Bold="true"
                                    onclick="btAccept_Click" Enabled="False" />
                            </td>
                            <td style="width:10%; text-align:center">
                                <asp:Button ID="btReject" runat="server" Text="Reject" Font-Bold="true" 
                                    OnClick="btReject_Click" Enabled="False" />
                            </td>                  
                            <td style="text-align:left; width:15%">
                                <telerik:RadTextBox ID="rtxtRequestTicket" Runat="server" 
                                    EmptyMessage="Enter Request Ticket #" Width="125px" MaxLength="9"                                                      
                                    ToolTip="Please enter the request ticket number that status already completed" 
                                    Display="False" Skin="Windows7">
                                </telerik:RadTextBox>
                            </td>
                            <td style="width:25%"></td>
                        </tr>
                    </table> 
                </div><br />        
                <telerik:RadGrid ID="RadGridUser" runat="server" Skin="Windows7" AutoGenerateColumns="false"
                    AllowPaging="True" CellSpacing="0"  
                    onneeddatasource="RadGridUser_NeedDataSource" 
                    onitemcommand="RadGridUser_ItemCommand" 
                    ongridexporting="RadGridUser_GridExporting" 
                    onexcelmlexportrowcreated="RadGridUser_ExcelMLExportRowCreated" 
                    onexcelmlexportstylescreated="RadGridUser_ExcelMLExportStylesCreated" 
                    onexportcellformatting="RadGridUser_ExportCellFormatting">
                    <ExportSettings ExportOnlyData="True"  
                        IgnorePaging="True" OpenInNewWindow="True" HideStructureColumns="True" 
                        FileName="">
                        <Excel Format="ExcelML" />
                    </ExportSettings>
                    <MasterTableView CommandItemDisplay="Top">
                        <CommandItemSettings ExportToPdfText="Export to PDF" 
                            ShowAddNewRecordButton="False" ShowExportToExcelButton="True" />
                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                        </ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn DataField="Action" HeaderText="Action"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ADName" HeaderText="AD_Name"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Email" HeaderText="Email" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Middle" HeaderText="Middle"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="VIP" HeaderText="VIP" >
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Location" HeaderText="Location" Visible="false"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Department" HeaderText="Department" Visible="false"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" ItemStyle-Width="80px">
                                <ItemStyle Width="80px" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Birthday" UniqueName="Birthday" HeaderText="Birthday"> 
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Last4" UniqueName="Last4" HeaderText="Last4" >
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="DebugEmpID" UniqueName="DebugEmpID" HeaderText="DebugEmpID" Visible="false" >
                            </telerik:GridBoundColumn>
                        </Columns>
                        <EditFormSettings>
                            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                            </EditColumn>
                        </EditFormSettings>
                        <ItemStyle HorizontalAlign="Left" />
                        <HeaderStyle HorizontalAlign="Left" />
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="Action" SortOrder="Descending" />
                        </SortExpressions>
                    </MasterTableView>
                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                    <FilterMenu EnableImageSprites="False">
                    </FilterMenu>
                    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Windows7">
                    </HeaderContextMenu>
                </telerik:RadGrid>       
                <br /><br />
                <asp:Label ID="lbResult" runat="server"></asp:Label>
            </telerik:RadAjaxPanel>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Windows7" />
        </form>
    </body>
    </html>

    Oh, one more thing, I want to export data from a RadGrid, by default it creates an .xls file type.  I want to export to an .xlsx (2007 format).  I searched on the forum and see that's possible by adding Excel-FileExtension = "xlsx" in the ExportSettings.  However, it's still not working.  Please help me on this matter.
    Thanks so much!

    Reply

  • Vasil Vasil admin's avatar

    Posted on Feb 1, 2012 (permalink)

    Hi Han,

    You should avoid using RadAjaxManager in combination with RadAjaxPanel.
    I suggest you to use asp:Panel and then to use RadAjaxManager for ajaxifying it. Or to remove the RadAjaxManager1 if you are not using it.

    See this forum thread for discussion about changing the file extension of the exported file.

    Greetings,
    Vasil
    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

    Reply

  • Han avatar

    Posted on Feb 1, 2012 (permalink)

    Hi Vasil,

    Thank you for your reply.  I follow your suggestion, now it works.  However, if I click on the export button and then click on any button on the RadGrid, I expect to see the loading image spinning again, but not in this case.  It still only shows the static animation.  I also follow the sample here and the same problem occur as well.  I realize that when user click on the export button, the onRequestStart() function is called.  Within this function, the args.set_enableAjax set to false, so I think after this function call, the loading panel animation will not work.  Am I right? And how can you fix this issue?  Please help. 

    Many thanks!

    Han

    Reply

  • Vasil Vasil admin's avatar

    Posted on Feb 1, 2012 (permalink)

    Hi Han,

    Indeed the Ajax is turned off during the export. Because in order to get the exported file you need to make full PostBack. You could find more information here:
    http://www.telerik.com/help/aspnet-ajax/grid-export-with-ajax-enabled.html
    Additionally if you want to show loading panel during the export, you could show one manually for a short period of time (since you can't know when the export is actually finished). Check this help topic for more information:
    http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

    Greetings,
    Vasil
    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

    Reply

  • Han avatar

    Posted on Feb 1, 2012 (permalink)

    Hi Vasil,

    Thank you for clarify that full PostBack is required when perform an export.  All I want is after the export is done, when I click on other buttons within the RadGrid such as Refresh, Next-Previous-Last, I can still see the loading animation spinning.  Right now, it's not spinning at all after the export button is clicked. 

    Thanks again for your help!

    Han

    Reply

  • Vasil Vasil admin's avatar

    Posted on Feb 1, 2012 (permalink)

    Hello Han,

    Well I was about to say that it happens just as you want, but then I realize it is working in Firefox(as where I have tested it before my previous reply) and not in IE9.
    I will inform our front-end developers for this issue and they will be able to tell if this is some browser behavior and how to solve it if it is possible.

    All the best,
    Vasil
    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

    Reply

  • Han avatar

    Posted on Feb 1, 2012 (permalink)

    Hi Vasil,

    Thank you for your quick reply.  You're right, it works in Firefox.   In my environment, we're still using IE8 and will adopt IE9 soon.  I will wait for your solution.

    Thank you so much!

    Han

    Reply

  • Galin Galin admin's avatar

    Posted on Feb 6, 2012 (permalink)

    Hi Han,

    I have tested carefully the described issue and I am able to observe it outside the RadGrid. For example in regular <div /> element
    <div style="height: 50px; margin: 50px 0; background:url('animatedImage.gif')">
        test test test test test
    </div>
     
    <img src="animatedImage.gif" alt="" />

    Therefore, I am afraid this is a browser behavior, but you can workaround it with reloading the page.

    I hope this helps.

    All the best,
    Galin
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Ajax > RadAjaxLoadingPanel Animation Not Spinning
Related resources for "RadAjaxLoadingPanel Animation Not Spinning"

[  ASP.NET Ajax Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]