RadMenu and Loading Panel - Clicking on menu item to redirects to slow loading page

[Keith]

When a user logs into our webportal web site, they are taken to the Customer Portal page that has a RadMenu.

The RadMenu is dynamically created with different menu items based on what the user has access to.

Some of the menu items are for web pages that are slow in loading.

I need a way to show a Loading Panel and/or message like "Loading...Please Wait!" on the Customer Portal page to indicate to the user that it is working on loading the web page and once it is done loading then show the web page.

Currently, I have the RadMenu set up to use OnClientItemClicking to prevent from anything happening if the user accidently clicks on the root menu item.

Please help!

Thanks in advance!

Sincerely,

Keith Jackson

[Veselin Tsvetanov]

Hi Keith,

Attached you will find a simple web-page implementing your scenario. It uses our RadAjaxLoadingPanel to be displayed, until navigation to the other page occurs. You will notice that I also have used the OnClientItemClicking event handler to show the loading panel. Moreover, the loading panel is shown on top of the form, that is 100% wide and high.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Keith]

Thanks Veselin!  That works just like I was looking for.

I noticed with the demos it shows a square box with a circle moving around.  But with this example you gave me, it is not showing that for some reason.  What can I do to show that?

Sincerely,

Keith Jackson

[Keith]

Correction!  It does not show in Internet Explorer version 11.  It does show in Chrome version 51.0.2704.103 m and Firefox version 43.0.2.

Is there an issue with Internet Explorer that causes it not to show the square box?

Sincerely,

Keith Jackson

[Veselin Tsvetanov]

Hi Keith,

You will need to set the Skin property of the RadAjaxLoadingPanel in order to render properly the loading wheel:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Bootstrap">
</telerik:RadAjaxLoadingPanel>

Regards,
Veselin Tsvetanov
Telerik by Progress

[Keith]

Hi Veselin,

    I have tried that and still does not work with Internet Explorer version 11.  It shows the circle of arrows but they do not move.  Under Chrome it works like it is suppose to.

Sincerely,

Keith Jackson

[Veselin Tsvetanov]

Hello Keith,

Here you could find a short video of the sample attached running on IE 11. As you can see the wheel moves as expected.

The observed problem may be due to a setting of the browser or another blocking issue. Please make sure the EI is not in Compatibility view mode. Review also the browser developer tools console for any JavaScript errors. You could also try to run the same sample on another machine with IE and check whether it demonstrates the same problem.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Keith]

Thanks for your help Veselin!  I will take a look at that.