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

RadAjaxLoadingPanel not animating loading image

1 Answer 149 Views

Ajax

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Totals for Annual Targets</title>

<link href="General.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.MyImageButton

{

cursor: hand;

}

.EditFormHeader td

{

font-size: 14px;

padding: 4px !important;

color: #0066cc;

}

</style>

</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>

RadAjaxLoadingPanel not animating loading image

1 Answer, 1 is accepted