Using the UpdateProgress control as a modal overlay

58 Comments

• Raj
  Could you send me a little info on controlling where the graphic or whatever appears - I seem to be too stupid to figure out what CSS I need to add to center it etc.
  Thanks
  

• Look at the ".updateProgress" and ".updateProgress div" classes in the CSS file. These get applied to the asp:UpdateProgress control and its inner div (see arrow below):
  
  
  
  <=====
  
  Loading...
  
  
  
  

• Any idea how to make this work when the UpdateProgress/UpdatePanel is inside an AJAXControlToolkit ModalPopupExtender already? I think the issue is "when" the javascript calculates the position for the modal overlay. It needs to do it *after* the MPE has positioned it (possible?)
  

• Raj, this is great! I cannot get it to work however. I keep getting an Iframe javascript error. I&#39;ll keep playing with it, but keep it up. Great idea.
  

• what a great control, i was looking around for such somthing, and u made my day
  thanks alot
  Mohamed Faramawi, Cairo,Egypt
  

• Thanks very much for fixing the relative / absolute positioning issues in the latest release.
  
  This is now an AWESOME control! Well done for a really great piece of work.
  

• Okay is there a way to make the control cover a whole page not just the update panel ?
  

• Dylan,
  
  The examples shows you how to cover the whole page. Set OverlayType to Browser.
  

• Hey Raj !!!
  good control !
  gr8 work dude keep it up....
  Best Wishes,
  Shekhar
  

• Hii Raj !
  I have used overlay control with gridview...
  
  but on sorting of grid it throws javascript exception that "className is null or not an object "..
  this error disappears when i removed overlay extender control....
  could you please help me with this ?
  
  Thanks n regards,
  Shekhar
  

• First off, awesome job so far. &nbsp;This control is easy to use and nice and customizable.
  
  However, my page does not extend far enough down to take the entire window, so when I call OverlayType=&quot;Browser&quot;, the UpdateProgress that appears only comes down as far as the content. &nbsp;
  
  Any way to fix this? &nbsp;
  
  -Z
  
  

• Hi Raj
  
  You have done an awesome job... great work indeed.... but am facing one issue with the dropdown... i.e. dropdown gets disappear when we click one any button. Dropdown seems to be working fine on firefox... It&rsquo;s giving this trouble on IE. I would really appreciate if you could answer this ASAP
  
  

• Hi Raj,
  
  This is an excellent set of controls you have released! Very powerful, yet simple and easy-to-use. But is there any way of positioning the Gif and loading text within the ProgressTemplate such that it is always absolutely centered, whether the OverlayType is set to browser or control?
  
  regards
  

• SWEET! Exactly what I was looking for. I plan on playing with it today.
  

• This is a great control. However, I am running into a problem with the Gif animation. The animation stops, then waits about 1-3 seconds when coming back to the page. Any thoughts on how to troubleshoot this.
  

• Michael,
  
  Assuming you are using a gif animation with an infinite loop, the only time I have seen it stop is when the browser is doing some processing to update the UI.
  
  Raj
  

• Hi Raj,
  You have done a great job. I need a little help from you.
  I would like to display the animation gif in the center of the object(grid/window/panel).
  Thanks in advance
  Arabinda
  

• can it be done with out using
  System.Threading.Thread.Sleep(4000); ?
  
  i dont know for the fact that how much time my server will take to get data from server and it may be more then 4 sec or 40 sec
  
  is there a way can be done without using
  System.Threading.Thread.Sleep(4000); ?
  
  thanks.
  

• Nisar,
  
  As I have mentioned in the default page of the samples, the Sleep statement is used to introduce a delay which helps in seeing the update progress animation. You *should not* use it in production.
  

• I'm getting a javascript error 'className' is null
  or not an object.
  
  On the first callback, it works 100%, but the second one I do, I get this error and the overlay doesn't display.
  

• I figured out why the className error gets thrown.
  
  On the second postback, it would seem that this.get_element() is returning undefined in the _onShow function.
  
  Very wierd. Its definatly not undefined in the beginRequest and endRequest of the same postback.
  I'm lost of how to fix this as I always thought this.get_element() as pretty reliable.
  
  One other minor problem/bug. If the control to overlay is within a scrolling area, eg. div, and that area is scrolled down/up a bit so that the control is not fully visible, when the overlay appears, it will cover what is visible of the control and also continue over and out of the scrolling area.
  

• Great control, but is there a way to dynamically add an updatepanel, gridview, and your extender control? Ive tried everything I known, it always throws exceptions that it cannot find a control.
  
  Im trying to make a composite control that will be in a class library.
  
  Thanks!
  

• This control is excellent and has saved hours of development time!!!
  
  Great Work ;)
  

• This is great work man!!
  

• Hi Raj,
  I've been using this control for many months and I'm very happy with it. However, since upgrading to .NET Framework 3.5 I get the following error every time I have an Update Panel Overlay Exteder on the page:
  'The control with ID 'upoeQuestion' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.'
  
  I have a ScriptManager on my Master page, and
  ScriptManagerProxys on all other pages where I am using MS Ajax. I have no idea why I am getting this error message.
  
  Any thoughts on this would be much appreciated...
  

• I've had this problem with the get_Element() method that Sean mentioned above.
  
  Interestingly with every page refresh the onShown handler gets called an increasing number of times (once on the first page refresh, twice on the second, etc.) Does it have something to do with disposing the control?
  
  Not too sure as I'm not that no top of these extender behaviors.....
  

• Sean and Steve,
  
  I have a new version out there. Let me know if you still run into issues.
  
  Thanks.
  
  Raj
  

• Absolutely superb control - it saved me A LOT of digging to write my own!
  Thank you
  Sam
  

• Found that if you don't have a CssClass listed, that it will throw the className errors that Sean and Steve listed. After I gave it a CSS to use, it started working every time.
  
  Raj,
  
  Thanks for this great AJAX control!
  

• Hi, nice control, haven't played around with it for that long yet but I've run in to an issue I can't seem to solve.
  
  For background info: I have a master page with a UpdateProgress that I try to hook the UpdateProgressOverlayExtender to it. I'm trying to lock the whole browser.
  
  The result is that the UpdateProgress and OverlayExtender only shows on the first postback for every page. The second time, nothing shows, it's just a normal postback. If I comment out the OverlayExtender, the UpdateProgress appears for each postback as it should.
  
  I've tried to put the UpdateProgress and OverlayExtender in underlying pages, not the master page, but the result is the same.
  
  Any ideas?
  

• First of all nice control, but it doesnt work with triggers. How can I make it working with AsyncPostBackTrigger
  
  Thanks.
  

• What about the licenising of this , can I use this in ma program without any problems
  

• Srikant,
  The code provided is free and not copyrighted.
  

• I figured out my problem with the OverlayExtender only appearing on the first postback. I had set DynamicLayout to false on my UpdateProgress (don't ask me why). Deleting that did the trick, it works as it should now. Thanks again for this nice control.. :)
  

• Mate, this is great! thanks alot!
  
  You did a great job!
  
  

• How to create the UpdateProgressOverlayExtender by Code? Do you have some example about it?
  

• Extender control 'UpdateProgressOverlayExtender1' cannot extend 'GridView1'.
  Extender controls of type 'Flan.Controls.UpdateProgressOverlayExtender' cannot extend controls of type 'System.Web.UI.WebControls.GridView'.
  
  doesn't work. what do I need to do?
  

• where is the code for this? the link does not seem to have it. &nbsp;or am i missing it? -thx.
  

• Great Job, Raj!
  Did anyone ever figure out how to make this work with Triggers?
  

• By the samples and conceptually this looks fantastic!
  
  Unfortunately, when I try to utilize it I get nothing but missing references. Even in the sample project, when I try to run the sample website with no editing, it crashes with:
  
  "Could not load file or assembly 'Flan.Controls' or one of its dependencies. The system cannot find the file specified."
  
  I'm sure it's just a matter of missing references or something of the like, but I have noticed there is a conspicuous lack of installation or use instructions. (ergo, I don't know which references to add.) If you think you could perhaps make even a quick list of what-to-do, I think that would help tremendously. Until then, it seems that I (for one, and I have noticed other commentors are in a similar boat) will apparently be unable to use this.
  
  Otherwise, I'm very excited to get to work with this--it looks really cool.
  

• Zach,
  You are correct. The refernces needed to be updated. In addition, there was a deprecated class that was being used. I have updated the code to fix both issues.
  Please post on the issue tracker on Codeplex if you still run into issues.&nbsp;
  Thanks for reporting this.
  Raj
  

• Is there a way to set the showat, etc. with client-side JS rather than via a post-back?
  

• Is there any way to crank the DIV style back to 100%?
  
  I love everything about this, except that I'd like to get the div opacity back up to 100% so that it looks like there's a modal popup, not just floating text. I find the text doesn't always work the greatest. I've tried copying the opacity css from the updateProgressBackground into the .div part, then increasing them to 100% (and even trying great numbers, just to be sure) and no matter what, that div is still only the same opacity as the surroundings. Thanks.
  

• Andy,
  From what I understand, you want to keep the child div opacity at 100% while keeping its parent element is at, say, 70%.
  
  This, AFAIK, is not possible with the current CSS standard. The parent element opacity is applied only after all its children have been rendered.
  
  Raj
  

• Thanks for the response, Raj.
  
  Not the answer I was hoping for, but I was afraid that it might be the reality.
  

• Muy bueno... sería mejor si tuviera propiedades para cambiar imagenes y colores..
  
  Pero esta excelente...
  
  Saludos
  
  

• Hi,
  Very nice tool thx. It worked perfectly...until I deployed !
  I now get "Flan is undefined" at :
  Sys.Application.add_init(function() {
  $create(Flan.UpdateProgressOverlayBehavior, {"associatedUpdatePanelID":null,"controlToOverlayID":"ctl00_ContentPlaceHolder1_panLightBox","displayAfter":0,"targetCssClass":"updateProgress"}, null, null, $get("ctl00_ContentPlaceHolder1_lightBoxProgress"));
  });
  
  What do you think I could be missing ?
  Thanks in advance.
  Julien
  

• Raj & Readers,
  
  Great control. I am now using it every where. However, I have spent lots of time trying to move the data binding part to code behind (therefore no sql in .aspx file), but never succeed in doing it. Is anybody tried it?
  
  Any thoughts Raj?
  
  Thanks Mo
  

• hey Raj.. how do i implement this ajax extender?
  
  i keep getting an error "UpdateProgressOverlayExtender" is unknown element. and i've add reference the dll.
  
  any ideas?
  

• Andy and anyone else,
  
  Andy said:
  
  "Is there any way to crank the DIV style back to 100%?
  
  I love everything about this, except that I'd like to get the div opacity back up to 100% so that it looks like there's a modal popup, not just floating text. I find the text doesn't always work the greatest. I've tried copying the opacity css from the updateProgressBackground into the .div part, then increasing them to 100% (and even trying great numbers, just to be sure) and no matter what, that div is still only the same opacity as the surroundings. Thanks."
  
  YES, you can make the progress div at 100% opacity BUT keep the background using an opacity. The way I did it was to put two divs inside of the ProgressTemplate. I removed the opacity setting on the class for the UpdateProgressOverlayExtender. So put two divs inside of the ProgressTemaplate like so: . And then in your css set .background with the opacity and the position: relative (This is the key). On the class .progress set to position: absolute; top: 10px; left: 50%; (set to the settings you want but again the position of this div is the key to making this work). Then you progress meter should be on top of the background therefore the opacity of the background doesn't affect the progress meeter. Also notice the divs are not nested. Hope this helps someone.
  

• Hi,
  Thanks for a great control Raj. I am using it quite extensively in one of my projects. However I am experiencing a problem when the contents of the page are too large to fit on the screen and the page needs to be scrolled. I am overlaying a control but when the user scrolls, the position of the loading icon is lost ie the loading icon does not render over the control it is supposed to. Is this a known issue and is there a solution to this.
  I noticed that Sean experienced a similar problem.
  Thanks
  

• the control is great. you rock man!
  

• Hi:
  Thanks for cool control. I have an image link &nbsp;in the Repeater and the click on that popsup the File Open/Save/Cancel dialog. On click it shows the overlay but once the dialog popup even i do open/cancel/save action the UpdatePanel does not come to normal state.
  Could you please guide how to fix it.
  -Thanks!
  

• I found out why, I was having the problem above. The order the controls are on your page seems to make a difference. I had the UpdatePanel, UpdateProgressOverlayExtender and then UpdateProgress control in that order. They have to be in the order UpdatePanel, UpdateProgress and then UpdateProgressOverlayExtender.
  
  Thanks
  

• I have them in the order UpdatePanel, UpdateProgress and then UpdateProgressOverlayExtender.
  

• Any one have the dll, without this error ?
  
  'The control with ID 'upoeQuestion' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.'
  
  I cant make work !!
  
  Thanks
  

• Hi,
  
  I would like to use this while making a page method call. Would it be possible to call the javascript function that displays the progress image at the same time that the page method is called and then call the function to make the progress image invisible again when the page method call is completed. I have tried using the following:
  updateProgress.style.display = 'block';
  and
  updateProgress.style.display = 'none';
  but then the progress image does not overlay the control. It justs shows up in its original position.
  
  Thanks
  Navin
  

• Great job, Raj
  Only one thing, with refer to the CSS file.
  The filter, MozOpacity and opacity properties at the updateProgress class appear as unknow CSS properties.
  Regards,
  

• The update progress control is just superb. Just what we were looking for.
  
  Thanks for the good work.
  
  -Moiz Tankiwala