RadAjaxLoadingPanel not animating loading image

2 posts, 0 answers
  1. Shuja
    Shuja avatar
    7 posts
    Member since:
    Jan 2011

    Posted 17 Jan 2011 Link to this post

    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>

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 19 Jan 2011 Link to this post

    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.
Back to Top