Rank 2
We have a RadGrid attatched to a database with a variety of additional controls on the page for filtering results (dropdowns listing out departments, etc. that when selected will trim down the list of returned results displayed in the grid).
When choosing an item in one of the dropdowns to filter the results, the grid fades out and has an overlay of the spinning circle animation briefly, then comes back with the returned results (all normal and as expected).
What I'd like to be able to do, is during the animation that is displayed, display a second animation somewhere else on the same page that occurs at the same time.
So far in testing, I've only been able to fire off the second animation after the postback occurs - the grid fades, spinning circle animation occurs, grid fades back in and displays results, then the second animation fires off.
Is there a way to have the secondary animation occur at the same time as the first one?
Thoughts?
Thanks in advance for any assistance offered,
- Dessie
7 Answers, 1 is accepted
The described scenario is easy to implement with the OnRequestStart and OnResponseEnd client event handlers of RadAjaxManager.
http://www.telerik.com/help/aspnet-ajax/client-side-events.html
| <%@ Page Language="C#" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!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 for ASP.NET AJAX</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" /> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> |
| <ClientEvents OnRequestStart="MyRequestStart" OnResponseEnd="MyResponseEnd" /> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="Button1"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="Panel1" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <asp:Button ID="Button1" runat="server" Text="AJAX" /> |
| <asp:Panel ID="Panel1" runat="server"> |
| Panel 1 |
| </asp:Panel> |
| <div id="myDiv" style="position:absolute;z-index:20000;top:100px;left:100px;border:1px solid red;display:none">my second animation here</div> |
| <script type="text/javascript"> |
| function MyRequestStart(sender, args) |
| { |
| $get("myDiv").style.display = ""; |
| } |
| function MyResponseEnd(sender, args) |
| { |
| $get("myDiv").style.display = "none"; |
| } |
| </script> |
| </form> |
| </body> |
| </html> |
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 2
Dimo,
Thanks - this is perfect.
Couple questions though...
Q1: Can you force it to display the entire secondary animation in its entirety? If for example, the second animation is 6 seconds long, but the postback itself only takes 4 seconds, is there a way to have it wait until the second animation is completed before continuing on?
Q2: Using your example as a base, I changed it to insert some html to a div during the "RequestStart" event instead of just hiding/revealing it. I can add in an image tag without any problems (pointing to my animation gif), but I'd like to get it to render an iFrame instead. The method I'm using is just a basic "myDiv.innerHTML" javascript call, which works if the html I want to add is an image tag, but if I try and add in the iFrame instead, it doesn't work. Any ideas as to why? Is this even possible?
What I'm trying to accomplish is to add in an "intentional visual distraction" during a postback event on a RadGrid. We have the grid populated from a database and have a series of separate filters that when maiking selections, will trim down the displayed results in the grid (on each selection, the "filter expression" is modified containing each selection for the SQL query). In the area of the page that contains these filter options, we have a "Number Display" that shows how many results have been returned (also dynamically changed based on the "filter expression"). What I'm trying to do is create an animation (for lack of a better term), that during the postback event of the grid (while its querying the server to get the new result list), will display a spinning random number sequence, then display the actual count after the postback completes.
I've got the random number generation working fine on its own (thats what I placed in the iFrame - a separate page that does nothing but display a random number sequence that spins through numbers for a fixed set of time using an AJAX Timer and click event), but need to see how to "hook it up" to rest of the page and display it in the placeholder area for the displayed number of results.
I can post some code if needed. Any thoughts on how to get this working?
Thanks again,
- Dessie
Both your questions are not related to RadControls. In such cases it is recommended to implement (part of) the scenario without RadControls, so that one finds out the correct algorithm, and then incorporate the code into a RadControls scenario.
1) You can save the current time in OnRequestStart, then see how much time has elapsed in OnResponseEnd and hide the <div> with a timeout, if necessary.
2) Appending an iframe to the DOM with Javascript is possible. The following Javascript methods are used:
document.createElement()
appendChild()
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 2
Thanks for the response.
I suppose you're right in the first question with it being more .NET or programming related than specifically RadControls...I guess I was more asking if there was something specific in RadControls that would allow me to specifiy the time taken for a response (as in, a "minimum time" before it could be completely processed). The current time idea may work, I'll have to play with it some to see if I can get it to work the way we want.
On the second question though about adding in an iFrame...the reason I had asked was because I could not get it to display when using RadControls and was curious if there was something that you knew of that would be causing the issue. As it is, I can get a static page to display within the frame just fine, but if it has any dynamic content, it always waits until the parent page has completely loaded before rendering the content...which defeats the purpose of trying to display it in the first place. It seems that the page load event of the iFrame will only fire off after completion of the its parent's page load event...does this sound accurate?
Thanks again,
- Dessie
I am not sure I understood correctly what you are trying to do, but as far as I can see, the page load client event of the iframe can be fired before or after the page load client event of the parent page - it depends on the amount of content on the two pages.
The page load client event of the iframe, which is appended during an AJAX request, is fired before the parent page's AJAX request is complete.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 2
I get what you're saying, but I think there may be something else occuring (possibly at the thread level) thats causing the rendering of the iFrame content to have to wait until the partial page postback of its parent page to complete.
It makes sense that I could call the page_load client event of either first (parent then iFrame, or iFrame then parent), but what I'm trying to do is call them both at the same time and have them execute simultaneously...not perform one then the other...perhaps this is where my misunderstanding of how it works and what's possible, or not possible is causing my frustration.
Also, on a related note, is the slight "hang" of the page just before the grid updates normal? Once I perform the partial page postback, the default spinning animation starts, spins for a second or so, then just stops and sits (not spinning anymore) for another second or so then the grids updates. I'm assuming this is a natural action associated with the completion of the rendering (complete page lifecycle it flows through from postback to re-render), but I'm curious if there's a way around it (if even possible).
Thanks,
- Dessie
The browser hang, during which all GIF animations (including RadAjaxLoadingPanel) stop, is the time when the browser renders the new content on the page. This cannot be avoided unless you remove the loading animation by setting BackgroundPosition="None" to the RadAjaxLoadingPanel (for versions Q1 2009+).
As for the page_load events - you cannot call them, they are fired by the browser and you cannot control the sequence. That's why I suggest you to not count on executing the page_load handlers at a specific moment.
Kind regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.