Adding a class to the selected menu item

[Khushali]

Hi,

I have created a kendo menu. The code for it is something like this:

html:
<div id = "menu"></div>

js:

  var menu = $("#menu").kendoMenu({
            dataSource: [{
                text: "tab1",
                url: 'javascript:showTab1()'
            }, {
                text: "tab2",
                url: 'javascript:showTab2()'
            }
            ]
        });
Now, whenever a menu item is selected, i want to show it as selected. Need to add a class to the selected menu item. How can i do that?

Regards,
Khushali

[Paulie]

Not sure if this is the easiest way, but I was able to do it using the menu onSelect Event, by adding the 'k-state-selected' class to the selected menu item.  I first loop through all items to clear this class from the last selected item.

 function onSelect(e) {

//Clear previously selected
        $("#menu").children().each(function (index) {
            $(this).removeClass('k-state-selected');
        });

//Mark just selected
        $(e.item).addClass('k-state-selected');
    }

KENDOUI, is there an easier way????????????????

[Kamen Bundev]

Hi guys,

It can get slightly easier, like this:
function onSelect(e) {
    this.element.find(".k-state-selected").removeClass('k-state-selected');
    $(e.item).addClass('k-state-selected');
}

All the best,
Kamen Bundev
the Telerik team

[Raviraj]

Thanks,
 
Raviraj 

[Ken Lewis]

The HighlightPath feature wasn't working for me, so this is what I came up with.

Using Firebug I noticed that the active menu item, based on the URL, has the "k-state-highlight" class. To cause it to appear selected, I use the jQuery statement below to add the "k-state-selected" class.

$('.k-state-highlight').addClass('k-state-selected');

I placed this in a document ready function just after the menu.

To do a similar thing for sub-pages that don't get the "k-state-highlight" class, I use a selector to find the menu item by its href value.

I hope this helps somebody else.

Ken

[Sunil]

Thank you Ken,

Its helped me resolve this issue. I just added that line into _layout document.ready.