Adding a class to the selected menu item

5 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. 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????????????????
  3. Kendo UI is VS 2017 Ready
  4. 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!
  5. Raviraj
    Raviraj avatar
    1 posts
    Member since:
    Feb 2012

    Posted 22 Oct 2012 Link to this post

    Thanks,
     
    Raviraj 
  6. 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
Back to Top
Kendo UI is VS 2017 Ready