CODEWITHSUNDEEP
javascriptmenukendo-ui
user3330535
user3330535

Reputation: 57

Kendo UI web menu, changing menu text

I need to change the menu text depending on user interaction on my web page. I am using kendo web menu. So far I tried it with:

var menu1 = $("#menu1").data("kendoMenu"); menu1.element[0].childNodes[0].innerHtml = "NEW TEXT";

It works nicely (with proper indexing), but after a few changes the menu is stired up (formatting, behaviour, etc.), which makes me think this is not the "official" way to do it. Any ideas?

Upvotes: 0

Views: 901

Answers (1)

OnaBai
OnaBai

Reputation: 40887

Instead of playing with the HTML DOM you should use some of the methods provided by KendoUI menu for managing new options.

You should take a look into:

  • insertBefore: Inserts an item into a Menu before the specified referenceItem.
  • insertAfter: Inserts an item into a Menu after the specified referenceItem.
  • append: Appends an item to a Menu in the specified referenceItem's sub menu.

You should use one or the other depending on where to insert.

In the following example you have two function for inserting as first option in a menu:

menu.insertBefore(
    [ { text: "NEW TEXT" } ], 
    "#where > li:first-child"
);

Where #where is the id of the li that contains the list of options (menu items).

If you want to insert as last option in a menu:

menu.insertAfter(
    [ { text: "NEW TEXT" } ], 
    "#where > li:last-child"
);

You can see it in action here

Upvotes: 1

Related Questions