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

Ajax UpdatePanel Loading CSS

2 Answers 465 Views

Ajax

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

2 Answers, 1 is accepted

answered on 26 Aug 2010, 01:02 PM

Hi Kishor,

You need to do two things:

1. Register the RadAjaxLoadingPanel CSS files manually with RadStyleSheetManager
2. Put inside the ProgressTemplate the same HTML code and CSS classes as the ones that RadAjaxLoadingPanel uses.

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

if (IsPostBack)

{

System.Threading.Thread.Sleep(5000);

Label1.Text = DateTime.Now.ToLongTimeString();

}

</script>

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

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

html,body,form

{

margin:0;

padding:0;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

<StyleSheets>

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" IsCommonCss="true" Name="Telerik.Web.UI.Skins.Ajax.css" />

<telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.WebBlue.Ajax.WebBlue.css" />

</StyleSheets>

</telerik:RadStyleSheetManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Panel ID="Panel1" runat="server">

<asp:Button ID="Button1" runat="server" Text="AJAX" />

<br />

<asp:Label ID="Label1" runat="server" Text="" />

</asp:Panel>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1" />

</Triggers>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate>

<div class="RadAjax RadAjax_WebBlue" style="position:absolute;top:0;left:0;width:100%;height:100%;">

<div class="raColor raTransp">

</div>

<div class="raDiv">

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

</body>

</html>

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items