This is a migrated thread and some comments may be shown as answers.

[Solved] How to trully disable menu items?

12 Answers 187 Views

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Nim asked on 24 Feb 2011, 10:26 PM

Hello,

I have created a menu like the following:

<%= Html.Telerik().Menu()
        .Name("menu")
        .Orientation(MenuOrientation.Horizontal)
        .Items(items => {
            items.Add().Text("Page 1")
                       .Action("Show", "Home", new {goto_page = "1"})
                       .Enabled(ViewData["current_page"].ToString()!="1");
            items.Add().Text("Page 2")
                       .Action("Show", "Home", new { goto_page = "2"})
                       .Enabled(ViewData["current_page"].ToString() != "2");
        })
%>

So, when ViewData["current_page"] contains "1", the menu item "Page 1" will be disabled.
When ViewData["current_page"] contains "2", the menu item "Page 2" will be disabled.

The UI looks good at run-time. Yet when I click on the disabled-menu-item, a call is actually made to the controller, which is not expected. I wonder if I'm missing something.

When the user clicks on a disabled-menu-item, how can we stop the menu to call the controller at all?

Many thanks!

12 Answers, 1 is accepted

answered on 13 Apr 2012, 12:41 PM

Hello Eva,

Yes, a disabled Menu item will still fire click events and this is expected in this implementation. However...

1. If the Menu item has a hyperlink, it will not navigate, which was the initial discussion about and this is what we fixed
2. Generally, we cannot prevent the click event from firing, because we do not use the disabled HTML attribute, as it is not applicable for <span> and <a> elements
3. You seem to be using a custom click handler, so you can easily check in it whether the item is disabled or not by checking whether the item's <li> element has a t-state-disabled CSS class.

Kind regards,
Dimo
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.

answered on 28 Jul 2012, 04:33 PM

if ($(e).hasClass('t-state-disabled')) is not working in my case.
I am trying to disable a menu from jquery like menu.disable(domElement);

var menu = $("#MyMenu").data("tMenu"); var totMenu = $("> li", menu.element).length;
for (var intCnt = 0; intCnt < totMenu; intCnt++) {
      domElement = $("> li", menu.element)[intCnt].childNodes[0];
      if (domElement.innerText == "Test")
          menu.disable(domElement);
}
The generated html

<li class="t-item t-state-default" style="float: right"><span class="t-link">Test</span></li>
Though it makes the item looks disabled visually but keep the class="t-item t-state-default".
Don't know why ?
So the t-state-disabled cannot be checked.
I think this is big issue if anyone is working with Telerik menus.