Highlight selected item (Kendo Web Menu)

[Jose]

Is there a way to highlight the selected menu item, as in the MVC menu?

Thanks in advance

[Iliana Nikolova]

Hi Mariano,

I am not sure if I understand your scenario correctly as the selected items in Kendo UI Menu are highlighted (take a look at this online demo). Could you please provide more detailed information about the exact outcome you are requesting? Thank you in advance.

Regards,
Iliana Nikolova
the Telerik team

[etbramble]

I believe the question might be, how do we highlight the menu item to match the currently loaded page.  I'm trying to do this same thing myself.

For example, I have a menu control with 4 items.  I'm on the page that represents the second item in the menu and I want that menu item to have a 'active page' highlight.  This has nothing to do with mouse hovering or using the mouse to select a sub-item (where than the parent menu item is highlighted).

I believe the asp.net mvc version of this control has this functionality (or does it?).  

Thank you.

[Jose]

What etramble said is exactly what I meant. In MVC menu the item (of the current page) is highlighted, but it does not in the Web menu. Is there any way to do this?

[etbramble]

Mariano,

Doesn't appear that there is built-in functionality to support this in the control, however, you can use JavaScript/jQuery to assign the appropriate CSS class to the menu item that corresponds to the current page. 

There are probably a few different ways to do this, but in my application I'm dynamically building the menu HTML from a web service response.  So, as I'm creating each menu item (<li>) I'm checking it's target url against the current page url.  If they match, then I use jQuery to assign the appropriate class (i.e. k-state-active) to highlight the menu item.  This is working for me.

Thanks,

[S]

Iliana Nikolova,

Your answer doesn't seem to work. The demo doesn't highlight anything after it's clicked.

If this feature is coming out of the box, it would be unnecessary (and it should not need) to add jQuery code to add k-state-highlight or overriding k-state-highlight in CSS.

Is this a bug? If so, where can I report this?

[Stephen]

I think we should all clarify what browser we are using.

The automatic highlight does not work for me in Chrome(v24), Firefox(18.0.2), but does in IE(v9) and Safari(v5.1.7).

The selected item does get the "k-state-highlight" class assigned but just doesn't do what is expected except in IE and Safari.

My menu is define as:

@(Html.Kendo().Menu()

    .Name("MainMenu")

    .Items(items =>

    {

        items.Add().Text("Home").Action("Index", "Home");

        items.Add().Text("Property").Action("Index", "Property");

        items.Add().Text("Admin").Action("Index", "Administration");

        items.Add().Text("Contact").Action("Contact", "Home");

    })

)

And the markup for the "current" menu/page is:

<li class="k-item k-state-highlight k-state-default" role="menuitem" id="MainMenu_mn_active">

    <a class="k-link" href="/blah-blah-blah/Property">Property</a>

</li>

But, the k-state-highlight does not work in Chrome/Firefox.
Using the blue-opal theme, in Chrome dev tools, the
    background-image: url('textrures/highlight.png')
is crossed out and 
    background-image: none, -webkit-linear-gradient.......
is in effect.
If I uncheck the "none" entry to force the highlight.png entry to take effect, it looks like it is working.
In IE, the highlight.png entry is in effect right away so it works without any changes.

I have attached a picture of the relevant Chrome CSS rules to show where it is getting mixed up.

[S]

John, thanks for clarifying this, it's helpful.

However, the issue with Kendo menu not highlighting parent menu is still remains. Well, by remains I mean it still doesn't work on Chrome, Firefox, IE. Only works in Safari.

See my screen cast here:
http://www.screencast.com/t/x89x3xT5ZY3v

And my attempt to raise the issue on another thread:
http://www.kendoui.com/forums/ui/grid/highlight-of-the-sub-menus-too.aspx

[Ken Lewis]

I have the same issue. I'm just using a single-level menu and was hoping to leverage the automatic highlighting. It works in IE but not Firefox (I haven't tried the other browsers). Is this a known bug? Is there a workaround besides jQuery?

[Georgi Krustev]

Hi,

Thank you for drawing our attention to this issue. The problem will be addressed for the Q1 2013 release of Kendo UI. Currently, you will need to JavaScript code to achieve your goal.

Regards,
Georgi Krustev
the Telerik team

[Umer]

Hi everyone,

I wrote following code to highlight selection. JQuery's addClass/removeClass are really the key part and rest is very straight forward. "menu" is the id of UL in my HTML. I hope it helps someone out there.

var viewModelMenu = kendo.observable({
    menu: ["Item 1", "Item 2"],
    selected: null,


    onMenuSelect: function (e) {
        var selected = viewModelMenu.get("selected");

        // unhighlight old selection
        if (selected != null)
            $(selected).removeClass("k-state-selected");

        // highlight current selection
        selected = e.item;
        $(selected).addClass("k-state-selected");
        viewModelMenu.set("selected", selected);

    },


    buildMenu: function () {
        var data = this.get("menu");
        var output = "";

        for (var i = 0; i < data.length; i++) {
            output += "<li>" + data[i] + "</li>";
        }

        $("#menu").html(output);
        $("#menu").kendoMenu({ select: this.onMenuSelect });

    }

});

[Tim Harker]

Here's what I did...

<ul id="kendomenu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("Create", "Contact", "Home")</li>
    <li>Gallery
        <ul>
            @{Html.RenderAction("Categories", "Products");}
        </ul>
    </li>
    <li>@Html.ActionLink("About Us", "About", "Home")</li>
</ul>

$(document).ready(function () {
    $("#kendomenu").kendoMenu({
        select: function (e) {
            $("#kendomenu").find(".k-state-selected").removeClass("k-state-selected");
            $(e.item).addClass("k-state-selected");
        }
    });
    $.each(
        $("#kendomenu").find(".k-link"),
        function (i, data) {
            if (data.href == location.href) {
                $(data).addClass("k-state-selected");
            }
        }
    );
});

[Andrew Galea]

Hey Tim,

Thanks very much for posting this. I just stumbled across it and it is a very elegant and effective way to solve the problem. And yes I have the latest Kendo UI release, it is April 2014 and menus still have this problem!

Thanks again for your solution.

Regards,
Andrew

[Georgi Krustev]

Hello Andrew,

The Telerik Menu for ASP.NET MVC highlights the path the selected item. Check this screencast which shows that the functionality works as expected. If you need additional functionality I would suggest you share the feature request in our UserVoice portal. Thus more people cast their vote for it.

Regards,
Georgi Krustev
Telerik