Adding a class to the selected menu item

6 posts, 0 answers
  1. Khushali
    Khushali avatar
    41 posts
    Member since:
    Jan 2012

    Posted 09 May 2012 Link to this post

    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
  2.
  3. Paulie
    Paulie avatar
    8 posts
    Member since:
    Jan 2010

    Posted 17 Aug 2012 Link to this post

    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????????????????
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Aug 2012 Link to this post

    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!
  7. Raviraj
    Raviraj avatar
    1 posts
    Member since:
    Feb 2012

    Posted 22 Oct 2012 Link to this post

    Thanks,
     
    Raviraj 
  8.
  9. Ken Lewis
    Ken Lewis avatar
    28 posts
    Member since:
    Sep 2009

    Posted 11 Feb 2013 Link to this post

    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
  11. Sunil
    Sunil avatar
    16 posts
    Member since:
    Jul 2015

    Posted 22 Jun 2017 in reply to Ken Lewis Link to this post

    Thank you Ken,

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

Back to Top