kendo menu ui on open create submenu

Question

I'm trying to create the submenu thru an ajax call sending the parent element as a parameter to get the submenu items on the open event but is not working.

Has anyone have an idea how this can be done?

Thanks

Answer 1

You can utilize the append method like

menu.append({text: submenu}, parentMenu);

where

1. parentMenu > is the target where you wanted to append, we need to pass this as param from select event
2. submenu > is the sub menu text/string

i tried it myself, here is the example

a bit of explanation of the example :

1. get the e.item and store/pass it to the function and will be used later as target where we wanted to append
2. do the ajax call then after you got the response, just do looping through the submenu and add it to the parent menu

ps : there is still 1 issue if you select the menu twice it will append the submenu twice, you need to handle this issue

Answer 2

The append method of the menu takes a list of items you want to append and a target (default is root). So I assume by your ajax reference you are fetching the submenu from the server/database. So convert that to the array and pass it in:

$.ajax({ 
    type: "POST",
    ... etc.
    success: function (menuData) {
       ... compose your submenu
       var menu = $("#menu").kendoMenu().data("kendoMenu");
       menu.append(submenuarray, $("#targetMenuItem"));
    ...
});

Here is a simplified DOJO example without the database part.

If you want this to occur when the menu is opened, add the Open event.