Telerik Forums / Kendo UI for jQuery Forum / Menu /

Highlight selected item (Kendo Web Menu)

Kendo UI
Resources Buy Try

14 posts, 1 answers

Jose

2 posts

Member since:
Jan 2011

Posted 02 Oct 2012 Link to this post

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

Thanks in advance
Iliana Nikolova
Admin

2622 posts

Posted 05 Oct 2012 Link to this post

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!
etbramble

2 posts

Member since:
Oct 2012

Posted 14 Oct 2012 Link to this post

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

2 posts

Member since:
Jan 2011

Posted 19 Oct 2012 Link to this post

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?
Answer
etbramble

2 posts

Member since:
Oct 2012

Posted 19 Oct 2012 Link to this post

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

15 posts

Member since:
Apr 2012

Posted 07 Feb 2013 Link to this post

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

90 posts

Member since:
Jan 2011
Posted 11 Feb 2013 Link to this post

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.

Chrome.PNG
S

15 posts

Member since:
Apr 2012

Posted 11 Feb 2013 Link to this post

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

28 posts

Member since:
Sep 2009

Posted 11 Feb 2013 Link to this post

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
Admin

3747 posts

Posted 12 Feb 2013 Link to this post

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!
Umer

3 posts

Member since:
Apr 2013

Posted 15 Apr 2013 Link to this post

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

12 posts

Member since:
Jul 2009

Posted 06 Aug 2013 Link to this post

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

22 posts

Member since:
Nov 2009

Posted 02 Apr 2014 in reply to Tim Harker Link to this post

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
Admin

3747 posts

Posted 04 Apr 2014 Link to this post

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!

Highlight selected item (Kendo Web Menu)

Jose

Iliana Nikolova

etbramble

Jose

etbramble

S

Stephen

S

Ken Lewis

Georgi Krustev

Umer

Tim Harker

Andrew Galea

Georgi Krustev