Hi Everyone,
I need to display something (as spinner?) to indicate the application is running, because I have a process that forces the user to wait for 30-60 seconds. I think a spinner would be helpful. What I'm not sure is, how to accomplish this. Ironically, when loading this page, this webpage displays two circles each rotating/spinning in different directions. Something like that would be perfect.
How can I duplicate this in my ASP.NET AJAX project?
Essentially, the user presses the RADButton. So, I'd like to pop the spinners when the long process begins, and then hide it when the process is over. Is there a way to launch the spinner from within my C# function?
Thanks,
Mike
1 Answer, 1 is accepted
Hi Mike,
I hope you are doing well!
To achieve the functionality of displaying a spinner when a RadButton is clicked and hiding it once the process is complete, you can use the RadAjaxLoadingPanel along with RadAjaxManager. Here is a step-by-step guide:
1. Add RadAjaxManager and RadAjaxLoadingPanel to your page
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadButton1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadButton1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Loading.gif" />
</telerik:RadAjaxLoadingPanel>2. Add the RadButton and Associate the Click Event
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="true" OnClick="RadButton1_Click" Text="Start Process">
</telerik:RadButton>3. Handle the Button Click Event in the Code-Behind
protected void RadButton1_Click(object sender, EventArgs e)
{
// Simulate a long-running process
System.Threading.Thread.Sleep(30000); // 30 seconds
// Update any necessary controls or perform actions after the process
}
4. Ensure the Loading Panel is Displayed During the AJAX Request
The RadAjaxManager will automatically show the RadAjaxLoadingPanel when the RadButton is clicked and hide it once the process is complete.
This setup will display the loading spinner when the RadButton is clicked and hide it once the process is complete.
Please refer to the following articles for additional information:
- https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/overview
- https://demos.telerik.com/aspnet-ajax/ajaxloadingpanel/overview/defaultcs.aspx
- https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-and-hide-ajaxloadingpanel-explicitly
- https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-the-loading-panel-next-to-ajax-initiator
Regards,
Rumen
Progress Telerik
Rank 1
Hi Rumen,
Thank you for a perfectly answered question. I really appreciate the time and effort your put into helping me. I did two things, first I put this example into a simple web app. This work as expected but there are a few follow up questions from this exercise.
1. When building the program, I kept getting errors on OnAjaxRequest="RadAjaxManager1_AjaxRequest". I couldn't figure out what to do with this, so I removed it, and things started to work. What should this be pointing to?
2. The spinner appears over the button itself. This is ok, but a large gif in the screen center would be better. Any ideas on how to place it there?
Next, I applied this example to my main program, and I ran into some oddities.
1. No matter where I placed the code from step one, the panel where the button is located is affected. It seems to want to take my buttons with are placed side by side and then it wants to stack them. I go from
to this:
Is it possible the gif size is affecting the button, and causing this change?
2. When running normally, I have a RadLabel that updates the user with some information. When I use the spinner code, this label doesn't update. When I take out the step 1 code, the RadLabel displays the output as expected.
So, what can I do to insure other screen elements update as expected?
Thank you very much for your help. I really appreciate it.
Mike
Hi Mike,
See my answers to your questions below:
1. The OnAjaxRequest is a Server-event that you can attach to the AjaxManager and do various things when triggered. This is optional, if you do not need it, you can remove it.
2. The Spinner always covers the element that you enable AJAX for. In this case, the Button has the AJAX enabled. If you want to cover the entire Page instead of the Button, you can either apply CSS so the AJAX Loading Panel will cover the entire Page, or enable AJAX for the entire page. Just make sure that you avoid nesting AJAX components. Before enabling AJAX for a component, double-check and ensure that none of the parents are Ajaxified. You can check out the Understanding AJAX Controls article for more details.
3. One of the benefits of AjaxManager is that you do not need to worry where the elements are located. They will dynamically get wrapped around an AjaxPanel and their loading panel will show up exactly there. I do not believe the gif size is responsible for the distorted layout. It is likely the HTML layout you have changes its dimensions relative to the parents. When the Parent is small, the child elements also get shrunk. There is no known solution as every scenario of every customer can differ. You will need to inspect the Page and troubleshoot what causes the content to shrink.
Here are some tips troubleshooting client-side related issues:
4. The label will only get updated if you include it in the AjaxSettings. Please check out the Understanding AJAX Controls article for more details.
I hope my answers will be helpful.
Rank 1
Hi Attila,
Thank you for this detailed response. These answers and the article Understanding AJAX Controls are very helpful, and have helped me improve my web page.
Best regards,
Mike