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

Highlight selected item (Kendo Web Menu)

13 Answers 1633 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jose
Top achievements
Rank 1
Jose asked on 02 Oct 2012, 08:08 AM
Is there a way to highlight the selected menu item, as in the MVC menu?

Thanks in advance

13 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 05 Oct 2012, 06:59 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
etbramble
Top achievements
Rank 1
answered on 14 Oct 2012, 03:04 PM
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.
0
Jose
Top achievements
Rank 1
answered on 19 Oct 2012, 07:32 AM
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?
0
Accepted
etbramble
Top achievements
Rank 1
answered on 19 Oct 2012, 02:04 PM
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,
0
S
Top achievements
Rank 1
answered on 07 Feb 2013, 07:47 PM
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?
0
Stephen
Top achievements
Rank 2
answered on 11 Feb 2013, 08:44 PM
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.
0
S
Top achievements
Rank 1
answered on 11 Feb 2013, 09:15 PM
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
0
Ken Lewis
Top achievements
Rank 1
answered on 12 Feb 2013, 01:05 AM
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?
0
Georgi Krustev
Telerik team
answered on 12 Feb 2013, 12:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Umer
Top achievements
Rank 1
answered on 15 Apr 2013, 10:43 AM
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 });
 
    }
 
});
0
Tim Harker
Top achievements
Rank 2
answered on 06 Aug 2013, 10:54 PM
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");
            }
        }
    );
});
0
Andrew Galea
Top achievements
Rank 1
answered on 02 Apr 2014, 07:44 AM
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
0
Georgi Krustev
Telerik team
answered on 04 Apr 2014, 09:06 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Menu
Asked by
Jose
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
etbramble
Top achievements
Rank 1
Jose
Top achievements
Rank 1
S
Top achievements
Rank 1
Stephen
Top achievements
Rank 2
Ken Lewis
Top achievements
Rank 1
Georgi Krustev
Telerik team
Umer
Top achievements
Rank 1
Tim Harker
Top achievements
Rank 2
Andrew Galea
Top achievements
Rank 1
Share this question
or