How to exchange items in menu

4 posts, 0 answers
  1. Tayger
    Tayger avatar
    98 posts
    Member since:
    Jan 2015

    Posted 27 Dec 2016 Link to this post

    Hello 

    Telerik, please correct me if I'm wrong in any case.

    I want to simply exchange one menu item by another one. A simple use case is a state change like "Show Tooltips" and "Hide Tooltips". For this scenario I saw two possibilites:

    1. Replace menu text visa versa
    2. Add new menu element after existing element and then remove first element

    Replace menu text visa versa
    This approach took me a while. With JQuery its a singe line, assuming you are using JQuery. Switching menu text only will visually screw up your menu element. This will happen because you remove also a class that was initially set on the element by defining the menu. So therefore you need to add the class again as well: 

    $('#hidetip').html('<span class="k-link">Tooltips anzeigen</span>');

     

    -> Pretty simple, you just need to know it.

    Hint: Use an additional attribute on the menu element like "state" (hidden, visible) to check/set its current state

     

    Add new menu element after existing element and then remove first element

    There is a menu function available called insertAfter that is obvious to use in this case. The main problem here is that you can't attach an ID or classes that way. I tried this:

    var mainmenu = $("#mainmenu").data("kendoMenu");
    mainmenu.insertAfter(
            {id: "showtip", text: "Show tooltips"},
            "#hidetip"
    );

    -> Text was attached but not the ID.

    Another one I tried after finding this forum entry: See here

    var mainmenu = $("#mainmenu").data("kendoMenu");
    mainmenu.insertAfter(
            {text: "<li id='showtip'>Show tooltips</li>",
                encoded: false}, // to interpret text as HTML not as pure text
            "#hidetip"
    );

    -> Text of element will be screwed up again inside menu. My initial thought was to add the class again:

    {text: "<li id='showtip'><span class='k-link'>Show tooltips</span></li>",
        encoded: false},

    -> Text inside menu is still screwed up and a further (empty) line was added after "Show tooltip" item (with the span class). Maybe I did something wrong here, just dunno what. I can live with the first solution.

     

     

  2. Tayger
    Tayger avatar
    98 posts
    Member since:
    Jan 2015

    Posted 27 Dec 2016 in reply to Tayger Link to this post

    Unable to re-edit my text. Here is the working link behind "See here": http://www.telerik.com/forums/menu-insertbefore-is-inserting-after-specified-element-when-using-datasource
  3. Alexander Popov
    Admin
    Alexander Popov avatar
    1433 posts

    Posted 29 Dec 2016 Link to this post

    Hi Tayger,

    Adding and removing items just to change the text seems like an overkill. I would recommend sticking to the first approach and replace the text inside the menu item.

    Regards,
    Alexander Popov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Tayger
    Tayger avatar
    98 posts
    Member since:
    Jan 2015

    Posted 29 Dec 2016 in reply to Alexander Popov Link to this post

    Hi Alexander

    Thank you for your advice, I agree an do it that way! In between I found out that the "screwed up" thing happens because I override the whole stuff inside the "li" but there is a span with a class around the displayed text and will be removed that way as well. It works on setting text inside that span and not on "li" element. JQuery example:

    $('#idofelement span:first').text('replacetext');

     

    Furthermore I found out that you can add custom attributes inside a menu element on inserting or appending it. There are some examples in Kendoui menu API help but not that obvious: 

    ...
    text {'mytext'},
    attr: {
    id: 'unique ID',
    type: 'whatever',
    status: 'ok'
    }
    ...

     

    I post this in case someone else needs this information.

Back to Top