Highlight selected item (Kendo Web Menu)

14 posts, 1 answers
  1. Jose
    Jose avatar
    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 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!
  3. Kendo UI is VS 2017 Ready
  4. etbramble
    etbramble avatar
    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.
  5. Jose
    Jose avatar
    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?
  6. Answer
    etbramble
    etbramble avatar
    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,
  7. S
    S avatar
    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?
  8. Stephen
    Stephen avatar
    86 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.
  9. S
    S avatar
    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
  10. Ken Lewis
    Ken Lewis avatar
    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?
  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 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!
  12. Umer
    Umer avatar
    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 });
     
        }
     
    });
  13. Tim Harker
    Tim Harker avatar
    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");
                }
            }
        );
    });
  14. Andrew Galea
    Andrew Galea avatar
    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
  15. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 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!
     
Back to Top
Kendo UI is VS 2017 Ready