Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadAjaxLoadingPanel not animating loading image

1 Answer 107 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Shuja
Top achievements
Rank 1
Shuja asked on 17 Jan 2011, 01:34 PM

Hi,

I am new to Telerik controls and i'm trying to use a radAjaxLoadingPanel to show activity when using a RadGrid. I have managed to get the radAjaxLoadingPanel to show it's default image but it does not seem to animate it to show the circle spinning, instead just shows a static image. My code for the page is below. Am i missing something here? 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TotalTargets.aspx.cs" Inherits="WorkStreamList"
StylesheetTheme="SkinFile" %>
  
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
  
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title>Totals for Annual Targets</title>
    <link href="General.css" rel="stylesheet" type="text/css" />
    <!-- custom head section -->
    <style type="text/css">
        .MyImageButton
        {
           cursor: hand;
        }
        .EditFormHeader td
        {
            font-size: 14px;
            padding: 4px !important;
            color: #0066cc;
        }
        </style>
    <!-- end of custom head section -->
  
</head>
<body>
    <form id="form1" runat="server">
  
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
               
  
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"  Skin="Web20"  EnableAjaxSkinRendering="true" EnableRoundedCorners="true"
           EnableEmbeddedSkins="true" EnableEmbeddedScripts="true" EnableEmbeddedBaseStylesheet="true" EnableTheming="true" EnableViewState="true" />
  
        <table border="0" cellpadding="0" cellspacing="0" style="height:30px; width:100%;" >
        <tr><td  style="width:80%">
            <img id="Img1" alt="Savings Plans" src="Pics/SavingsPlansTitle2.gif" runat="server"  />
              <asp:Label ID="lblUserName" runat="server" Font-Bold="True" Font-Size="Small" ForeColor="Black"
                Style="font-size: Small"></asp:Label> 
        </td><td style="width:20%" align="right">
        <asp:UpdateProgress runat="server" ID="updateprogress1" >
            <ProgressTemplate >
            <div class="progress">
                <img alt="" src="Pics/load.gif"  
                    style="width: 30px; height: 30px; vertical-align:middle" /><b><span style="font-size: small; color: #FF0000">
                Please Wait...</span></b>
            </div> 
            </ProgressTemplate>
        </asp:UpdateProgress>
        </td></tr>
  
        </table>
          
        <div id="MainSection" runat="server" >
  
        <div style="width: 800px; text-align: center;">
            <asp:UpdatePanel ID="UpdatePanel3" runat="server"  >
                <ContentTemplate>
                    <asp:Label ID="lblError" runat="server" Font-Bold="True" Font-Size="Medium" ForeColor="Red"
                        Style="font-size: small"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
          
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:SavingsPlanDBConnectionString %>"
                SelectCommand="SELECT [id], [BusinessCode], [BusinessUnit], [Directorate], [TotalTarget], [FinancialYear] FROM [OverallTargets]" 
                DeleteCommand="DELETE FROM [OverallTargets] WHERE [id] = @id" 
                InsertCommand="INSERT INTO [OverallTargets] ([BusinessCode], [BusinessUnit], [Directorate], [TotalTarget], [FinancialYear]) VALUES (@BusinessCode, @BusinessUnit, @Directorate, @TotalTarget, @FinancialYear)" 
                UpdateCommand="UPDATE [OverallTargets] SET [BusinessCode] = @BusinessCode, [BusinessUnit] = @BusinessUnit, [Directorate] = @Directorate, [TotalTarget] = @TotalTarget, [FinancialYear] = @FinancialYear WHERE [id] = @id" >
            <DeleteParameters>
                <asp:Parameter Name="id" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="BusinessCode" Type="String" />
                <asp:Parameter Name="BusinessUnit" Type="String" />
                <asp:Parameter Name="Directorate" Type="String" />
                <asp:Parameter Name="FinancialYear" Type="String" />
                <asp:Parameter Name="TotalTarget" Type="Decimal" />
                <asp:Parameter Name="id" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="BusinessCode" Type="String" />
                <asp:Parameter Name="BusinessUnit" Type="String" />
                <asp:Parameter Name="Directorate" Type="String" />
                <asp:Parameter Name="FinancialYear" Type="String" />
                <asp:Parameter Name="TotalTarget" Type="Decimal" />
            </InsertParameters>
        </asp:SqlDataSource>
          
        <asp:SqlDataSource ID="DS_Directorate" runat="server" 
            ConnectionString="<%$ ConnectionStrings:DataAcademy400ConnectionString %>" 
            SelectCommand="SELECT DISTINCT LOWER(DirectorateDescription) AS DirectorateDescription FROM ORACLE_DS_GL_Hierarchy WHERE (DirectorateCode <> 'BS') ORDER BY DirectorateDescription" >
        </asp:SqlDataSource>
          
        <br />
        <asp:Label ID="Label2" runat="server" Text="Total Targets:" ForeColor="Black" Font-Size="Medium"  Font-Bold="True" Font-Names="Monotype Corsiva,Verdana"></asp:Label>
        <br />
          
  
  
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  
            <script type="text/javascript">
                function RowDblClick(sender, eventArgs) {
                    sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
                }
            </script>
  
        </telerik:RadCodeBlock>
  
  
  
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
  
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" HorizontalAlign="Center" Visible="true" Skin="Web20" 
            RegisterWithScriptManager="true"/>
          
  
        <telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
            AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True" AllowPaging="True"
            AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Skin="Web20" >
            <PagerStyle Mode="NextPrevAndNumeric" />
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="Id"
                DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" AutoGenerateColumns="False">
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                        <ItemStyle CssClass="MyImageButton" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="Id" HeaderText="Id" SortExpression="Id"
                        UniqueName="Id" ColumnEditorID="GridTextBoxColumnEditor1">
                    </telerik:GridBoundColumn>
                    <telerik:GridDropDownColumn DataField="BusinessCode" DataSourceID="SqlDataSource1"
                        HeaderText="BusinessCode" ListTextField="BusinessCode" ListValueField="BusinessCode"
                        UniqueName="BusinessCode" ColumnEditorID="GridDropDownColumnEditor1">
                    </telerik:GridDropDownColumn>
                    <telerik:GridDropDownColumn DataField="BusinessUnit" DataSourceID="SqlDataSource1"
                        HeaderText="BusinessUnit" ListTextField="BusinessUnit" ListValueField="BusinessUnit"
                        UniqueName="BusinessUnit" ColumnEditorID="GridDropDownColumnEditor2">
                    </telerik:GridDropDownColumn>
                    <telerik:GridBoundColumn DataField="Directorate" HeaderText="Directorate"
                        SortExpression="Directorate" UniqueName="Directorate" Visible="True"
                        EditFormColumnIndex="1" ColumnEditorID="GridTextBoxColumnEditor2">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="FinancialYear" HeaderText="FinancialYear"
                        SortExpression="FinancialYear" UniqueName="FinancialYear" Visible="True"
                        EditFormColumnIndex="1" ColumnEditorID="GridTextBoxColumnEditor3">
                    </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="TotalTarget" SortExpression="TotalTarget" UniqueName="TemplateColumn"
                                                EditFormColumnIndex="1">
                                                <ItemTemplate>
                                                    <asp:Label runat="server" ID="lblTotalTarget" Text='<%# Eval("TotalTarget", "{0:C}") %>'></asp:Label>
                                                </ItemTemplate>
                                                <EditItemTemplate>
                                                    <span><telerik:RadNumericTextBox runat="server" ID="tbTotalTarget" Width="40px" DbValue='<%# Bind("TotalTarget") %>'></telerik:RadNumericTextBox><span
                        style="color: Red"><asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="tbTotalTarget"
                        ErrorMessage="*" runat="server">
                                </asp:RequiredFieldValidator></span>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
  
                    <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                        UniqueName="DeleteColumn">
                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings ColumnNumber="2" CaptionDataField="Id" CaptionFormatString="Edit properties of Product {0}" InsertCaption="New Product">
                   <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                    <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White"
                        Width="100%" />
                    <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" />
                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                    <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"
                        UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                    </EditColumn>
                    <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" />
            </ClientSettings>
  
        </telerik:RadGrid>
        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="200px" />
        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor2" runat="server" TextBoxStyle-Width="150px" />
        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor3" runat="server" TextBoxStyle-Width="150px" />
        <telerik:GridDropDownListColumnEditor ID="GridDropDownColumnEditor1" runat="server" DropDownStyle-Width="110px" />
        <telerik:GridDropDownListColumnEditor ID="GridDropDownColumnEditor2" runat="server" DropDownStyle-Width="110px" />
        <telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server" NumericTextBox-Width="40px" />
          
  
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:SavingsPlanDBConnectionString %>" 
            SelectCommand="SELECT [id], [BusinessCode], [BusinessUnit], [Directorate], [TotalTarget], [SortOrder] FROM [OverallTargets]"
            FilterExpression="id='{0}'" 
                DeleteCommand="DELETE FROM [OverallTargets] WHERE [id] = @id" 
                InsertCommand="INSERT INTO [OverallTargets] ([BusinessCode], [BusinessUnit], [Directorate], [TotalTarget], [SortOrder]) VALUES (@BusinessCode, @BusinessUnit, @Directorate, @TotalTarget, @SortOrder)" 
                UpdateCommand="UPDATE [OverallTargets] SET [BusinessCode] = @BusinessCode, [BusinessUnit] = @BusinessUnit, [Directorate] = @Directorate, [TotalTarget] = @TotalTarget, [SortOrder] = @SortOrder WHERE [id] = @id">
            <DeleteParameters>
                <asp:Parameter Name="id" Type="Int32" />
            </DeleteParameters>
  
            <UpdateParameters>
                <asp:Parameter Name="BusinessCode" Type="String" />
                <asp:Parameter Name="BusinessUnit" Type="String" />
                <asp:Parameter Name="Directorate" Type="String" />
                <asp:Parameter Name="TotalTarget" Type="Decimal" />
                <asp:Parameter Name="SortOrder" Type="Int32" />
                <asp:Parameter Name="id" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="BusinessCode" Type="String" />
                <asp:Parameter Name="BusinessUnit" Type="String" />
                <asp:Parameter Name="Directorate" Type="String" />
                <asp:Parameter Name="TotalTarget" Type="Decimal" />
                <asp:Parameter Name="SortOrder" Type="Int32" />
            </InsertParameters>
        </asp:SqlDataSource>
                  
        <br /><br /> 
          
        <asp:LinkButton ID="btnHome" OnClick="btnHome_Click" 
        runat="server" CausesValidation="False" 
        Text="<img style='v-align:bottom; margin-top:3px;Border-style:none;' src='Pics/home2.gif' alt='Back To Home Page'>"></asp:LinkButton>
         Back To Home Page
          
        <br /><br />
        <asp:LinkButton ID="btnBack" OnClick="btnBack_Click" 
        runat="server" CausesValidation="False" 
        Text="<img style='v-align:bottom; margin-top:3px;Border-style:none;' src='Pics/back.png' alt='Back To Home Page'>"></asp:LinkButton>
         Back To Reference Tables Page        
          
    </div> 
    </form>
</body>
</html>

 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 19 Jan 2011, 04:36 PM
Hello Shuja,

I could not see an obvious reason why the problem could be happening in the code. Could you please check if the image starts spinning if you show the loading panel for a longer period of time (by setting for example MinDisplayTime="2000")?

All the best,
Tsvetina
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Ajax
Asked by
Shuja
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or