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

RadAjaxLoadingPanel Animation Not Spinning

7 Answers 248 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Han
Top achievements
Rank 1
Han asked on 27 Jan 2012, 04:56 PM

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!

7 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 01 Feb 2012, 09:17 AM
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
0
Han
Top achievements
Rank 1
answered on 01 Feb 2012, 03:49 PM
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
0
Vasil
Telerik team
answered on 01 Feb 2012, 04:22 PM
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
0
Han
Top achievements
Rank 1
answered on 01 Feb 2012, 04:35 PM
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
0
Vasil
Telerik team
answered on 01 Feb 2012, 04:44 PM
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
0
Han
Top achievements
Rank 1
answered on 01 Feb 2012, 04:52 PM
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
0
Galin
Telerik team
answered on 06 Feb 2012, 12:19 PM
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 >>
Tags
Ajax
Asked by
Han
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Han
Top achievements
Rank 1
Galin
Telerik team
Share this question
or