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

Highlight selected item (Kendo Web Menu)

13 Answers 1830 Views

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

13 Answers, 1 is accepted

Accepted

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,

answered on 11 Feb 2013, 08:44 PM

Chrome.PNG

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.

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 });

}

});

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");

}

);

});