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

Adding a class to the selected menu item

5 Answers 1733 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Khushali
Top achievements
Rank 1
Khushali asked on 09 May 2012, 12:24 PM
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

5 Answers, 1 is accepted

Sort by
0
Paulie
Top achievements
Rank 1
answered on 17 Aug 2012, 07:44 PM
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????????????????
0
Kamen Bundev
Telerik team
answered on 20 Aug 2012, 12:01 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Raviraj
Top achievements
Rank 1
answered on 22 Oct 2012, 11:42 AM
Thanks,
 
Raviraj 
0
Ken Lewis
Top achievements
Rank 1
answered on 12 Feb 2013, 02:38 AM
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
0
Sunil
Top achievements
Rank 1
answered on 23 Jun 2017, 02:42 AM

Thank you Ken,

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

Tags
Menu
Asked by
Khushali
Top achievements
Rank 1
Answers by
Paulie
Top achievements
Rank 1
Kamen Bundev
Telerik team
Raviraj
Top achievements
Rank 1
Ken Lewis
Top achievements
Rank 1
Sunil
Top achievements
Rank 1
Share this question
or