How to exchange items in menu

[Tayger]

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.

 

 

[Tayger]

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

[Alexander Popov]

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

[Tayger]

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.