How to disable Menu / Page when navigating on click

[Dean Wyant]

I am using RadMenu for a site's main menu (in a master page). When I click on a menu item that takes me to another page, the menu remains active. I can highlight other menu items which can open submenus etc. Clicking menu items does not change the navigation but having the menu and page active can cause confusion.

When the page is changing (user clicks a menu item that navigates away from the page), a wait cursor should appear and the entire page should no longer be active (the user should not be able to browse through the menu or change inputs, press buttons etc.)

I have looked for a solution here, but I have not found one.

I can probably use OnItemClicking and check the navigateURL to make sure the page is changing, then overlay a transparent div on the page and set the cursor to wait...
But, I figure that either the menu may already have this feature or someone has code that has already been written and tested?

TIA

[Peter]

Hello Dean,

We don't have such an example, but as far as RadMenu is concerned, you can disable it on client item click:

function OnClientItemClicking(sender, eventArgs) {
            sender.disable();
        }

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dean Wyant]

I am not sure why the menu does not disable itself when navigating to another url? I guess that the navigation could fail and then the menu would still be disabled. Some timeout would resolve that problem.

I decided to implement a page disable on menu navigation myself. I am posting the code here in hope that it will save time for others.
Much of this comes from information gathered by searching the net. There is a lot of good and bad info about disabling a page. Hopefully, the method I chose will work for most situations.

This is meant to be used for a main website menu that uses URL's. I simply check for "#" as the first character. If you are using javascript etc. instead / or as well as URL's, the code may need to be changed / extended. 

C#

MyMenu.OnClientItemClicking = "NameSpace.OnAppMenuClicking";

Javascript

NameSpace.setBusy = function(secs)
{
  document.body.style.cursor = "wait";

  var d = document.createElement("div");
  d.style.position = "absolute";
  d.style.left = "0px";
  d.style.top = "0px";
  d.style.width = "100%";
  d.style.height = "100%";
  d.style.backgroundColor = "white";
  d.style.zIndex = "10000";
  d.style.cursor = "wait";
  d.style.opacity = ".40";
  d.style.filter = "alpha(opacity = 40)";
  d.style.textAlign = "center";

  d.id = "setBusy";
  d.onkeypress = d.onclick = function() { return false; }
  document.body.appendChild(d);
  d.innerHTML = "<img src='images/loading.gif' alt='Please Wait' style='margin-top: " + ((d.offsetHeight / 2) - 10) + "px; '/>";

  if ((secs) && (secs > 0)) // otherwise, you will have to call setNotBusy
    setTimeout(NameSpace.setNotBusy, secs * 1000);
  return true;
}

NameSpace.setNotBusy = function()
{
  var d = document.getElementById("setBusy");
  if (d)
  {
    document.body.removeChild(d);
    delete d;
  }
}

NameSpace.OnAppMenuClicking = function(sender, eventArgs)
{
  var url = eventArgs._item.get_navigateUrl();
  if ((url) && (url.length > 0) && (url.substring(0,1) != "#"))
    NameSpace.setBusy(15);
}

I used a timeout of 15 seconds in case the navigation fails. It is easy to change it in the code. And, you will need a "images/loading.gif" or change the image src in the code (perhaps a parameter woudl be nice?)

Some browsers do not show the image. There could be a problem with the textAlign, margin-top etc.
 
Please post any fixes / improvements.