UpdateProgress not showing up

I have a page which has a FormView control and when I click one of the rows I get an ModalPopup for editing the detailed information. This works, however it takes too long for ModalPopup to open. Since I haven't found any solution for speeding up the ModalPopup, I thought I might as well inform the user that the data is loading on the background. I also thought that I might give UpdateProgress-control a try. I know that this is not the best solution for this (performance) issue but so far is the best I can figure out.

My page looks like this:

<Button> (hidden)
<ModalPopupExtender>
<Panel>
<UpdatePanel>
<FormView>
</UpdatePanel>
<UpdateProgress>
</Panel>

So what I would like is that before ModalPopup is visible, user gets an message presented by UpdateProgress, that something is going on. However with this current setup, nothing happens, UpdateProgress is not activated. Any ideas why ?

The ModalPopupExtender and the popup control have to be inside the UpdatePanel for UpdateProgress to be activated.

Hi,

Here an example of how to procede with.

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">

<ContentTemplate>

<!-- Place here your ModalPopupExtender and the popup control -->

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgressID="UpdateProgress1"DynamicLayout="false"runat="server"DisplayAfter="50">

<ProgressTemplate>

<spanstyle="font-family: Trebuchet MS; color: #ffffff;">Chargement...</span</ProgressTemplate>

</asp:UpdateProgress>

<ajaxToolkit:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"runat="server"TargetControlID="UpdateProgress1"HorizontalSide="Center"VerticalSide="Middle"HorizontalOffset="0" />

Kind regards,

Ok,

Thanks both, I try to take look at this bit more today.

I tried this and it works, thanks !

One question though, why is AlwaysVisibleControlExtender needed, because the examples I have seen are done without this ? I always thought that UpdateProgress would be the only control needed here.

Happy to see that it works.

k000der:

I tried this and it works, thanks !

One question though, why is AlwaysVisibleControlExtender needed, because the examples I have seen are done without this ?

This extender is just here for managing the UpdateProgressExtender position. As you can seeHorizontalSide="Center"VerticalSide="Middle"

are for specifying the position in the screen where you would like to have the loading displayed, and even if you are scrolling up and down inside the page, you'll see that the position will always stay where you define it.

Kind regards,

Ok, now I see why it's needed. Thanks again.

UpdateProgress not reacting to LinkButtons in MultiView and FormView

I have a Content Page with two UpdatePanels. The first one has a FormView inside it and second one has MultiView with several Views. In each of this views I have a GridView in it. I change the views by LinkButtons that are also in the same UpdatePanel.

My problem is that none of the PostBack events in the UpdatePanels seem to fire the UpdateProgress. However, if I add a third UpdatePanel with a Label and a Button whith the following code, it does react to the Button click.

ProtectedSub btnTest_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)

System.Threading.Thread.Sleep(3000)

lblTest.Text = DateTime.Now.ToString()

EndSub

But it still won't react to the events in the other two panles. Am I doing something wrong? All help would be greatly appriciated.

Thank you.

One more thing:

I can also move the Label and the Button to one of the exisiting UpdatePanels and the Button Click event does fire the UpdateProgress correcctly.

I also have two DropDownLists in the FromView (located inside a UpdatePanel) with PostBack events. Shouldn't that trigger the UpdateProgess?

Anyone?

Thank you.

I did some futher testing and noticed if I copy the following in the LinkButton Click Sub, the UpdateProgress shows for that 3 seconds:

System.Threading.Thread.Sleep(3000)

So basically it seems only to work when sleeping but not when doing actually something, like sorting data in the GridView.

Is there anyway to fire the UpdateProgress manually?

Found an interesting link that almost (but not quite) handels my problem:

http://smarx.com/posts/why-the-updateprogress-wont-display.aspx

I tryed to use UpdatePanelAnimationExtender instead and found out a strage thing. When using the following code clicking the button that does that sleep thing, everything works fine. But when I do any other action on the that UpdatePanel (click a LinkButton that chages the active View, sort data in the GridView) the OnUpdating animation (FadeOut) only begins and then stops for several seconds until the data is rendered and then the OnUpdated animation (FadeIn) runs entirely. Strange!

<cc1:UpdatePanelAnimationExtenderID="UpdatePanelAnimationExtender1"runat="server"TargetControlID="upnDataTabs">

<Animations>

<OnUpdating>

<FadeOutDuration="1"Fps="40"/>

</OnUpdating>

<OnUpdated>

<FadeInDuration=".5"Fps="20"/>

</OnUpdated>

</Animations>

</cc1:UpdatePanelAnimationExtender>

I seem to be talking to myself here... MUST TAKE MY MEDICAION

UpdateProgress panel positioning

I have a page that has a datagrid that can be quite long. I don't want to page it so a user sometimes scrolls down and then clicks a button in the grid.

The issue is that the updateprogress image is up at the top of the page and if a user scrolls and then clicks in the grid they don't see the progress image because it is up top.

Is there a way to put the updateprogress panel where the user clicked instead of up top in a set position all the time?

Hi,

You can set the position of the updateprogress image via javascript according to the button's position.

Thanks

updateprogress panel for onLoad Event

I am creating a dashboard where I have four quadrants on the page. Each quadrant show data for a sql query. When the page loads I fire off all four queries to retrieve the data. I want to be able to show a progress indicator graphic inside of each quad as the data is retrieved and then rendered. How do I get the graphic to display in each quad as the page is loading?

Hi Joee,

UpdateProgress only shows during an asynchronous postback. In your situation, it won't be shown because it is a synchronous post back only. So we should add four UpdatePanel and its associated UpdateProcess to the page. When the page is shown, we force the four UpdatePanels be refreshed with the datas obtained from Database. To refresh the UpdatePanel, we should use __doPostBack("UpdatePanel's ClientID",""); or fire its trigger.

Hope this helps.

Best regards,

Jonathan

Jonathan, do I use JavaScript for the __doPostBack() and do I just put that in the head of the page?

Hi Joee,

joee:

do I use JavaScript for the __doPostBack()

Yes, but not the only way. You can put a hidden button which is the trigger of the four UpdatePanels and use Javascript to fire its click event. Also , we have other similar ways.

I hope this help.

Best regards,

Jonathan

Updateprogress panel does not disappearing

Hello:

I have a web page with updatepanel and updateprogress. In each callback, updateprogress is showed with a panel "loading".

My problem is that, if I call other web page that opens one PDF in other window, updateprogress does not disappear from the screen:

In button click I have:

Response.Redirect(

"getDocument.aspx",false); //This page does not load on same explorer. It is opened in other window

I have tried adding code at bottom of this sentence, like "UpdatePanel1.Update();" or updateprogress1.visible=false, but no way.

Any ideas?

Thanks and regards

How you are loading the response in another explorer using Response.Redirect or are you opening the window from the client side?

refer this tutorial also:

http://ajax.asp.net/docs/tutorials/ProgrammingUpdateProgress.aspx

referDisplaying Update Progress Using Client Script in the above page.This describes how to intercepte page request manager lifecycle.

Hello and thanks by responding:

I am calling a web page called Getdocument.aspx from code behind (on rowcommand of datagrid). Not from client-side.

This web page "GetDocument.aspx", generates a PDF file with Response.binaryWrite and open it in a new browser. But caller page remains or must remain active.

Regards

UpdateProgress panel

I'm using the updateprogress panel on my pages and when its "running" it moves my grid down on the page, is it possible to show it in a pop up window or show it overlaying my grid?

In essence, when I'm showing my "Processing" I want it either in a pop window or overlaying my grid view some how. can this be done?

Hi IGotYourDotNet,

You can take a look at theModalPopup orAlwaysVisibileControl because I think these have both been used by people on this forum for showing update progress.

Thanks,
Ted

ok thanks, I'll take a look at them.

also I currently have it on the page running and when the page errors out it shows a javascript alert box and doesn't take the user tomy error page. Is there a way to not show the javascript alert box and take them to my error page with using the updateProgress?

IGotYourDotNet:

I'm using the updateprogress panel on my pages and when its "running" it moves my grid down on the page, is it possible to show it in a pop up window or show it overlaying my grid?

In essence, when I'm showing my "Processing" I want it either in a pop window or overlaying my grid view some how. can this be done?

If I'm understanding correctly, I think you can just put the contents of your updateprogress info inside of a div and set the z-index. Like this:

1<atlas:UpdateProgress ID="UpdateProgress1" runat="server">2 <ProgressTemplate>3 <div style="z-index:100;position:absolute;left:10px;top:0px;">4 Loading...5 </div>6 </ProgressTemplate>7</atlas:UpdateProgress>

This will also position the progress at the very top left of the browser

I want it centered on the page, not in the corners of the browsers

IGotYourDotNet:

I want it centered on the page, not in the corners of the browsers

Just change the div style to this:

<div style="z-index:100;position:absolute;left:50%;top:50%;">

yeah i got it to work but I don't like how it looks. I'm going to look at the modal/popup to see if I can get that to work.

Also in using this, how can I still take my users to the error page (if it happens) and not show the javascript alert window like it currently does?

Hi,

I'm not very familiar withUpdateProgress, but if you ask this in the"Atlas" UI forum you should be able to find out.

Thanks,
Ted

UpdateProgress on top and dimming of page

I have seen this used in several places but have yet to see how to do it. When a process is initiated and the UpdateProgress is shown, it is shown on top of everything else on the page and it dims the whole page and everything else on it to bring attention to the progress control. I am assuming that it is just some layer made to be transparent but like I said, I can't find anything about it. Can someone give me some more information or better yet, point me to a tutorial?

Thanks in advance!

Try to take a look at this reading to?get?some?ideas?-?http://ajax.asp.net/docs/overview/UpdateProgressOverview.aspx#HowTheyWork.
You?can?implement the progression through?threading?sleep,asp:UpdatePanel and asp:UpdateProgress.
Wish the above can help you.

UpdateProgress problem with December CTP

Hi, can someone please tell me why the UpdateProgress doesn't apear?

<%@dotnet.itags.org. Page Language="C#" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server">
protected void Page_Load(object sender, EventArgs e) {
btn.Click += new EventHandler(btn_Click);
}

void btn_Click(object sender, EventArgs e) {
System.Threading.Thread.Sleep(1000);
}
</script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
<div>
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger EventName="Click" ControlID="btn" />
</Triggers>
<ContentTemplate>
<%= DateTime.Now.ToString() %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btn" runat="server" Text="Button" />
<asp:UpdateProgress ID="progress" runat="server" AssociatedUpdatePanelID="up1">
<ProgressTemplate>
<span>Loading...</span>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>

Hey :)

is this a known problem or I'm doing something wrong?

I've readthis post but this is not what I want. I want every update panel on my page to have it's own update progress. Something like this:

<%@. Page Language="C#" %
<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
btn1.Click += new EventHandler(btn_Click);
btn2.Click += new EventHandler(btn_Click);
}

void btn_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000);
}

</script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">

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

<asp:Button ID="btn1" runat="server" Text="Btn1" />

<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="panel1" runat="server" style="background-color:#ccc;">
<%= DateTime.Now.ToString() %>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel
<asp:UpdateProgress ID="uProgress1" AssociatedUpdatePanelID="up1" runat="server">
<ProgressTemplate>
<span>Loading panel 1</span>
</ProgressTemplate>
</asp:UpdateProgress
<br /
<asp:Button ID="btn2" runat="server" Text="Btn2" /
<asp:UpdatePanel ID="up2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn2" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="panel2" runat="server" style="background-color:red;">
<%= DateTime.Now.ToString() %>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel
<asp:UpdateProgress ID="uProgress2" AssociatedUpdatePanelID="up2" runat="server">
<ProgressTemplate>
<span>Loading panel 2</span>
</ProgressTemplate>
</asp:UpdateProgress
<div>
</div>
</form>
</body>
</html

How to make this work? And the trigger buttons to be outsite the update panels...

10x

I've just read that :)

You can associate theUpdateProgress control with a singleUpdatePanel control by setting the progress control'sAssociatedUpdatePanelID property. In that case, theUpdateProgress control displays a message only when a postback originates inside the associatedUpdatePanel control.

sorry :)

Updateprogress problem

I am new to AJAX. And I don't understand why this doesn't update the label. The problem started on another page with Placeholders that don't get updated if I use UpdatePanels.

Thanks Asger

<%@dotnet.itags.org.PageLanguage="VB" %>

<%@dotnet.itags.org.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI"TagPrefix="asp" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<scriptrunat="server">

ProtectedSub tbCity_TextChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)

lbl1.Text = tbCity.Text

EndSub

</script>

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

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

<asp:UpdateProgressID="UpdateProgress1"runat="server">

<ProgressTemplate>

<div>

<asp:ImageID="Image1"runat="server"ImageUrl="~/images/vent.gif"ImageAlign="Top"/>

</div>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:UpdatePanelID="UpdatePanel2"runat="server">

<ContentTemplate>

<asp:TextBoxID="tbCity"runat="server"AutoCompleteType="None"autocomplete="off"Width="200px"AutoPostBack="true"OnTextChanged="tbCity_TextChanged"/><br/>

</ContentTemplate>

</asp:UpdatePanel>

<asp:Labelrunat="server"ID="lbl1"/>

</div>

</form>

</body>

</html>

AsgerJornow:

I am new to AJAX. And I don't understand why this doesn't update the label. The problem started on another page with Placeholders that don't get updated if I use UpdatePanels.

Hi asger,

Your setup is wrong!

The label doesn't get updated because it is NOT on this updatepanel!!!!

Your textbox should be outside the updatepanel, the label inside, then define the textbox as a trigger of the updatepanel.

Or just place them both on the updatepanel.

Kind regards,
Wim

Thank you, now I get the picture. And it seems to be working.

Kind regards
Asger J?rnow

UpdateProgress Problem

I am running Atlas on a Win 2K3 Server and I installed the latest version of Atlas today. I created a simple hello world page, which runs as expected. However, when I add an UpdateProgress control and try to view the page, the following two alert boxes appear (in order):

"Assertion Failed: Could not resolve reference to object named "_pageRequestManager" for "dataContext" property on object of type "Sys.Binding"

"Assertion Failed: No data context available for binding with ID"" and dataPath "inPostBack" on object of type "Sys.Binding"

The ASPX page that works correctly is:

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
lbTest.Text="Hello World!";
}
</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">
<title>Atlas Test</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager id="ScriptManager1" runat="server"></atlas:ScriptManager>

<atlas:UpdatePanel id="update1" runat="Server" Mode="Conditional">
<ContentTemplate>
<asp:Label id="lbTest" runat="server">This is a test</asp:Label>
<asp:Button id="Button1" runat="server" Text="Test Atlas" OnClick="Button1_Click" />
</ContentTemplate>
</atlas:UpdatePanel>
</form>
</body>
</html>

The ASPX page that fails is:

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" %>

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
lbTest.Text="Hello World!";
}

</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">
<title>Atlas Test</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager id="ScriptManager1" runat="server"></atlas:ScriptManager>

<atlas:UpdatePanel id="update1" runat="Server" Mode="Conditional">
<ContentTemplate>
<asp:Label id="lbTest" runat="server"></asp:Label>
<asp:Button id="Button1" runat="server" Text="Test Atlas" OnClick="Button1_Click" />
</ContentTemplate>
</atlas:UpdatePanel>

<atlas:UpdateProgress ID="ProgressIndicator" runat="server">
<ProgressTemplate>
<div id="progressArea">
Loading the data, please wait... <asp:Image ID="LoadingImage" runat="server" ImageUrl="~/img/spinner.gif" />
</div>
</ProgressTemplate>
</atlas:UpdateProgress>
</form>
</body>
</html>

My web.config file looks like this:

<?xml version="1.0"?>

<configuration>

<configSections>
<sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
<section name="converters" type="Microsoft.Web.Configuration.ConvertersSection"/>
</sectionGroup>
</configSections>

<microsoft.web>
<converters>
<add type="Microsoft.Web.Script.Serialization.Converters.DataSetConverter"/>
<add type="Microsoft.Web.Script.Serialization.Converters.DataRowConverter"/>
<add type="Microsoft.Web.Script.Serialization.Converters.DataTableConverter"/>
</converters>
</microsoft.web>
<system.web>
<compilation debug="true"></compilation>

<pages>
<controls>
<add namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
<add namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
</controls>
</pages>

<authentication mode="Forms" ></authentication>

<xhtmlConformance mode="Strict"/>

<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" type="Microsoft.Web.Services.ScriptHandlerFactory" validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="Microsoft.Web.Services.ScriptModule"/>
</httpModules>

</system.web>
</configuration>

I pulled the UpdateProgress directly from a sample online, and I can't figure out why it doesn't work.

Can anyone spot any obvious errors? Are there trust issues related to the DLL that holds the UpdateProgress class?

Any help, leads or links would be helpful - thanks.

Update - the first example I posted above DOES NOT WORK. The postback was so fast I mistakenly thought it was working.

No Atlas scripts are working above - anyone have any ideas?

I discovered the problem. I had forgotten to add an "EnablePartialRendering"attribute to true on my ScriptManager.

The first page above had a pagewith just an UpdatePanel. The pageworked, but it posted back instead of updating through atlas. When I added an UpdateProgress, I got thefollowing two error messages:

"Assertion Failed:Could not resolve reference to object named "_pageRequestManager" for"dataContext" property on object of type "Sys.Binding"

"Assertion Failed:No data context available for binding with ID"" and dataPath"inPostBack" on object of type "Sys.Binding"

I couldn't find anyinformation on these error message, and I assumed there was some problem in theinstallation. When I included the "EnablePartialRendering"attribute it solved the problem. I'msure as the Atlas documentation expands, this issue will be covered morethoroughly.

Thaks to Scott Gu and Matt Gibbs for taking some time to respond to my questions about it.
It is possibly related with this problemhttp://forums.asp.net/thread/1243525.aspx

UpdateProgress Position in middle of screen

Hi,

I have various updatepanels on the same page. I want to have 1 updateprogress on the same page and depending on which updateprogress is updating that the updateprogress move to the middle of the updateprogress that is updating. The following code below allows me to position the updateprogress in the centre of the page but when the the page is scrolled down the updateprogress doesn't move its position appropriately.

Can anyone help?

I have inspected the values of the document.body.scrolltop and it is always at 0. How can change the position of the updateprogress when the user scrolls the page?

<

scriptlanguage="javascript"type="text/javascript">

function

adjustDivs(){var df=document.getElementById("updateprogressdiv");

df.style.position=

'absolute' ;

df.style.left =document.body.offsetWidth/2 + document.body.scrollLeft -150;

df.style.top = document.body.offsetHeight/2 + document.body.scrollTop -50;

}

window.onload=adjustDivs;

window.onresize=adjustDivs;

window.onscroll=adjustDivs;

</

script>

did you ever figure how to make the updateprogress display in the center of the page even when you scroll the page down

or does anybody have any other ides on how to make this happen

hello.

you can easilly do that with the AllwaysVisibleControlExtender available on the atlas toolkit.

Hi,

I've come up with some DHTML to always center the animated gif on your screen, AS WELL AS disable all elements by throwing a transparent IFRAME z-indexed to the top. Keep in mind that I have NOT tested this with other browsers, only in IE6. If anyone wants to cross-browser/cross-platform modify it, be my guest.

<atlas:UpdateProgressID="uppMain"runat="server">

<ProgressTemplate>

<iframeframeborder="0"src="about:blank"

style="border:0px;position:absolute;z-index:9;left:0px;top:0px;width:expression(this.offsetParent.scrollWidth);height:expression(this.offsetParent.scrollHeight);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75, FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100);"></iframe>

<divstyle="position:absolute;z-index:10;left:expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);top:expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop);">Please Wait...<br/><imgsrc="/_images/statusbar.gif"/></div>

</ProgressTemplate>

</atlas:UpdateProgress>

Works Perfect....Thanks for the code...

Okay... dude... that "left: expression((t..." line is absolute GENIUS!!! I had NO idea that you could do that! It even works in a stylesheet!

You are the MAN! Unless you're a girl, in which case you're... well, still the man! :D

Seriously, you guys couldn't have bumped this thread a couple hours ago? I just finished my own attempt at using UpdateProgress to disable page controls... and yours is better. :(

Umm,

I was under the impression that CSS "expression" is not standard. I know it works in IE, but does it work in Firefox. I know we've had problems before, because I don't think Firefox recognizes it. I could be wrong, though. You might want to cross-browser test it.

Hi guys/gals,

Tadmeister's introduction of Javascript within CSS was absolutely brilliant i thought also. So along with some help from another article on some Javascript i decided to do some customisation of my own. But instead of using an iframe (if anyone has a problem with it), I used a Panel for the overlay and another Panel within it for the "loading..." text. Here is a snippet in case anyone wants to try it out. I've tested it and it works nicely in Firefox2 & IE7, but IE6 gave me some problems with the vertical positioning. I used a hack for IE6, and anyone is welcome to improve on it!

<ajax:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Panel ID="Panel1" CssClass="overlay" runat="server">
<asp:Panel ID="Panel2" CssClass="loader" runat="server">
Loading...
</asp:Panel>
</asp:Panel>
</ProgressTemplate>
</ajax:UpdateProgress>

and the CSS for it:

.overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
background-color: #FFFFFF;
width: 100%;
height: 100%;
filter: Alpha(Opacity=70);
opacity: 0.70;
-moz-opacity: 0.70;
}
* html .overlay {
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
}
.loader {
z-index: 100;
position: fixed;
width: 120px;
margin-left: -60px;
top: 50%;
left: 50%;
}
* html .loader {
position: absolute;
margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px');
}

Yea, I know...the margin-top expression for IE6 is not the best, but if someone can make it work properly, be my guest. Alternatively check out: www.codeproject.com/ajax/modalupdateprogress.asp for Ting Huang's custom ajax extender.

Cheers!
Shalan99

Is there a way to get this to cover only a div or something? I have some web parts that do updates, and would like it to be centered within those, but I can't get that to work.

Hi Sarvis,

There are ways to achieve this. Raj Kaimal has a great bunch of control/extenders...one of which does what u want it to do, minus centering it in the associated control itself. Check it out @.: http://weblogs.asp.net/rajbk/archive/2007/01/08/using-the-updateprogress-control-as-a-modal-overlay.aspx

Another way to do this jus came to mind, but let me test it out first before i post any code.

Cheers!

Thank you very much. Great post. Tadmeister

Hi Tadmeister,

I implemented above code it worked, but receiving CSS validation is not valid for property left/top. How do I avoid receiving these error in .aspx page.

Please help...

Thanks for that, works fine

UpdateProgress Template and the Control Toolkit

I have an

atlas:UpdateProgress Template on the same page as some cascading drop downs. I have put in a large (5 seconds) delay on the webservice populating the dropdowns but still don't see the ProgressTemplate.

Does the UpdateProgress Template work with the control toolkit or is it just for UpdatePanels?

The Toolkit controls do not natively work with Atlas's UpdateProgress control. I looked into this briefly just now and it doesn't seem like the UpdateProgress control can be used in this way. Rather, it seems to tie itself directly to the "in postback" status of the relevant page. Since there are no postbacks in the CascadingDropDown scenario, UpdateProgress doesn't seem relevant. Sorry about that!

UpdateProgress taking up space

I've placed an UpdateProgress control on my page. But it's taking up space on the form when not displayed. Is there a way to make it so that when it's not showing it won't take up any space on the page?

Never mind. I have so many panels, tables and other controls, that it realy makes it difficult to identify any problems. The UpdateProgress wasn't the issue.

UpdateProgress subcontrols modification

I have the following code in place on my page. What I would like to do is to dynamically set the
lblProcessingRequest Text property during page load, because the site have some local language
customization build in.

I have tried a lot of things, but can't manage to get it to work.

<asp:UpdateProgressID="UpdateProgress"runat="server"AssociatedUpdatePanelID="UpdatePanel"DisplayAfter="100"DynamicLayout="False">

<ProgressTemplate><imgsrc="images/ProcessAnimation.gif"align="absMiddle"> <asp:labelID="lblProcessingRequest"Text="Processing request..."runat="server"Font-Bold="True"></asp:label></ProgressTemplate></asp:UpdateProgress>

The content is a template, so you can't immediately get at the controls like you normally can.

The template is instantiated during PreRender, so you should be able to hook into the Page's PreRenderComplete event, then do a FindControl on the update progress to get to the label:

private void PreRenderCompleteHandler(object sender, EventArgs args) {
Label l = (Label) UpdateProgress.FindControl("lblProcessingRequest");
l.Text = ""; // some localized text
}

Whenever you do this sort of thing, please, please be wary of ViewState. You should disable ViewState on that label, or you will be persisting viewstate data that doesn't need to be. If you are doing this for many labels on the page it could really add up to a problem. Read my (lengthy) article on ViewState, linked in my signature, if you have time.

ProtectedSub Page_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.PreRenderTryCType(UpdateProgress.FindControl("lblProcessingRequest"), Label).Text ="Some local Text"
Catch exAs Exception
EndTryEndSub

Sorry to say that this doesn't work. The control is not found. Couldn't this be because the label only is visible during the UpdateProgress, and at all
other time is hidden? I even tried hooking the control in the UpdateProgress PreRender method, but that didn't work eighter...

Ok, was I litte to hasty here.

Protected

Sub Page_PreRenderComplete(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.PreRenderComplete

Hooking into the PreRenderComplete works fine!

UpdateProgress with AssociatedUpdatePanelID not showing

I have a page withe 2 updatepanels & 2 updateprogress, when I set the AssociatedUpdatePanelID for each updateprogress control, neither is displayed when its associated panel is updated but when I remove the AssociatedUpdatePanelID, they work. But I need to set it. What can I do?

Can you post your asp.net code?

<

tr><td align="right">Country</td><td><asp:DropDownListID="ddlCountry"runat="server"DataSourceID="CountriesDS"DataTextField="CountryName"DataValueField="CountryId"AutoPostBack="True"AppendDataBoundItems="True"><asp:ListItemValue="0">-- Select Country --</asp:ListItem></asp:DropDownList></td></tr><tr><tdalign="right">City</td><td><ajax:UpdatePanelID="CityPanel"runat="server"UpdateMode="Conditional"><ContentTemplate><asp:DropDownListID="ddlCity"runat="server"DataSourceID="CitiesDS"DataTextField="CityName"DataValueField="CityId"><asp:ListItemValue="0">-- Select City --</asp:ListItem></asp:DropDownList>

<

ajax:UpdateProgressID="CityLoading"runat="server"AssociatedUpdatePanelID="CityPanel"><ProgressTemplate><imgsrc="../images/spinner.gif"align="absmiddle"alt="Loading..."></ProgressTemplate></ajax:UpdateProgress></ContentTemplate><Triggers><ajax:AsyncPostBackTriggerControlID="ddlCountry"/></Triggers></ajax:UpdatePanel></td></tr>

Hi, I have the same problem. The probem is with Triggers collection of UpdatePanel. It doesn`t work together with UpdateProgress.

Put that DropDownList inside UpdatePanel control and it will work.

Thanks it worked

UpdateProgress: Hide Page During Asynchronous Postbacks

I did a quick search, but I wasn't able to turn anything up. While an asynchronous postback is in progress, I'd like to hide the primary contents of the page and displayonly the contents of UpdateProgress. After the processing has completed, the controls should be made viewable again.

Is this possible?

Thank you,

--
Sean

Just in case anybody else comes across this, I got it to work by writing some custom JavaScript to hide a predetermined div. That way, when the UpdateProgress control is displayed, the screen is otherwise blank.

Updating an Update Panel on a page from Javascript

Hi All,

I am trying to update an update panel in a webform from Javascript. Form the documentation I think this might be possible using the Sys.Webforms.PageRequestManager but I have not been able to achieve this so far.

Any help would be greatful.

Hamlet

Hi Hamlet !

I been having the same wish ! After a lot of googeling the only way I found is to put an invisible button in a updatepanel and then raise it's postbackevent by registrering it's postbackevent in the scripthandler. Using the

$get('<%= YourControl.ClientID %>').click();

didn't work in FireFox and I supspect - but don't know for sure - not in ie7 ! One thing I wasted alot of time on was that the ValidateEventError but that was because I supplied an argument when registrering the clientscript in the scripthandler !

This feels like an uggly hack to accomplish what we want - but I didn't find any other way !

/MC24

I have been using

javascript:__doPostBack('__Page', 'some data' ) from the client.

This worked fine in the earlier release, but Beta 2.0 broke it because it started doing full postbacks instead of partial ones.

Evan

You can use the extender control I build.

http://daron.yondem.com

Updating an UpdatePanel from another webpage.

I have an UpdatePanel on a page. This webpage opens up a new web page. Is it possible to force an update of the UpdatePanel on the first webpage from the second page?

hello.

yep, that should be possible. if your main problem is establishing the comunication from the child to the parent window, then take a look here:

http://www.javascriptkit.com/javatutors/remote2.shtml

But what can I call on the parent page to force a submit of the panel. Would I, for example, have to call the submit event of a button which in turn will submit the updatepanel or is there an event which I can call directly on the updatepanel itself? I don't really want to have to add an extra control to raise the submit event which would be visible to the user.

hello.

yes, that is the idea... you can add a button to the page and hide it (say, set it's css display to none). so, your parent page can expose a method that is responsible for calling the click methdo over that button (this method will be called from your child page).

Updating ContentPlaceHolder using UpdatePanel(like using frames)

Hi guys,

Is there a way to update the whole Content page without master page refreshing it self? like same effect as using frames or iframes in html.

I tried following, just simply placing script manager and wrapping ContentPlaceHolder with UpdatePanel, which didn't work.

Any suggestions?

<%@dotnet.itags.org. Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<html>
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div id="main"
<div id="titleBar">Title</div>

<div id="siteMenu">
<asp:Menu ID="Menu1" runat="server" SkinID="MenuBar" DataSourceID="SiteMapDataSource1" OnMenuItemClick="Menu1_MenuItemClick">
</asp:Menu>
</div>

<div id="content">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate
<asp:contentplaceholder id="contents" runat="server"></asp:contentplaceholder>

</ContentTemplate>
</asp:UpdatePanel>
</div>

<div id="footer">footer</div
</div
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</form>
</body>
</html>

Sorry to say that master pages and AJAX don't work together in that fashion (seehttp://odetocode.com/Blogs/scott/archive/2007/01/03/9682.aspx).

There are lots of ways to refresh the content inside of the page using AJAX, but what you are trying to do requires the browser to load an entirely new page. :/

Thanks Scott.

I won't be wasting any more time trying to figure that one out.

Guess I am back to using good old Iframe.

Cheers

Dosa.

Updating control in UserControl inside of UpdatePanel

Hello,

I have a page that contains a UserControl. Most of the page (including the UserControl) is wrapped in an UpdatePanel. When an AJAX event on the page occurs, I'd like to call a method inside of the UserControl to update a label. Problem is, when I do this, the page adds a new copy of the UserControl's contents (with the updated label) at the bottom of the page rather than refreshing the existing copy. Any idea what I'm doing wrong?

Thanks.

Are you dynamically creating the controls in the user control or dynamically creating the usercontrol itself? Posting your source code would be helpful.

Nope, no dynamic loading of anything. The page just looks something like this:

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

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<Custom:HotelDetailsrunat="server"ID="HotelDetails1"/>

</ContentTemplate>

</asp:UpdatePanel>

And there's an event in the code-behind of the page:

ProtectedSub DateChanged(ByVal srcAsObject,ByVal eAs Infragistics.WebUI.WebSchedule.WebDateChooser.WebDateChooserEventArgs)

HotelDetails1.UpdateRooms(wdcCheckIn.Value, wdcCheckOut.Value)

EndSub

And in the UserControl, there's a public method like this:

PublicSub UpdateRooms(ByVal StartDateAs DateTime,ByVal EndDateAs DateTime)

litName.Text = StartDate.ToShortDateString()

EndSub

I split the page into two UpdatePanels...one for the even firing controls and one for the UserControls that get updated and that seems to resolve the issue.