How can I configure dynamic sub menu options for a static menu

Question

I have a kendo context menu that is configured to be displayed whenever a right-click occurs on the items in the kendo listview. Within the context menu, I want some of the options to have submenu options which have to be loaded dynamically as they differ based on which item of the listview is clicked on. I have configured the ajax call that returns the required data. The issue is, I am not able to figure out, how can I assign these options to the submenu, so that when the submenu is expanded the dynamic options are loaded.

I have the kendo context menu created in the typescript file associated with the cshtml file. I tried adding the open event to the kendo context menu, inside which I created the datasoure, when the ajax call is completed and then I created the kendo context menu. Drawback- it replaces the old menu and does not serve the requirement of loading the submenu options. Other thing I tried was, adding the logic in the select event of the context menu that does something similar, but that did not do much

Context menu code:

<ul id="ContextMenu" style="display:none">
  <li><i class="far fa-trash-alt fa-fw"></i> Delete</li>
  <li><i class="fas fa-minus fa-fw"></i>Stop</li>
  <li class="inc">
    <i class="fas fa-arrow-up fa-fw"></i>Increase
    <ul></ul>
  </li>
  <li class="dec">
    <i class="fas fa-arrow-down fa-fw"></i>Decrease
    <ul></ul>
  </li>
</ul>

Typescript file, kendo context menu creation:

$('#listView').on('mousedown', '.product', null, (e: JQueryEventObject) => {

    $("#ContextMenu").kendoContextMenu({
        target: "#listView",
        filter: ".item",
        select: (e: kendo.ui.ContextMenuSelectEvent) => {

            if (e.item.textContent.trim() == "Increase") {
                //Ajax call here 
                //If the ajax call succeeds 
                //I created the dynamic datasoure
                var ds = [{
                    text: "Increase",
                    items: [{
                        text: name
                    }]
                }];


                $("#lvPrescribedContextMenu").kendoContextMenu({
                    target: "#listView",
                    filter: ".item",
                    dataSource: ds
                });

I will expect the context menu to load the static options when it opens and then when the option with submenu options is either hovered over or clicked on, it should show the dynamic options.

Answer 1

I've solved it by creating the datasource of the context menu completely dynamically. Whenever the open-event occurs (https://docs.telerik.com/kendo-ui/api/javascript/ui/menu/events/open), I set the datasource.

function contextMenuOpen(e) {
    // Ugly check to test if the context menu has been opened - not sure if it is still required
    if (e.item.length) {
        this.setOptions({
            dataSource: [
                { text: "@Html.Raw(Resources.BtnEdit)", enabled: !someVar },
                { text: "@Html.Raw(Resources.BtnDownload)" },
                { text: "@Html.Raw(Resources.BtnRename)", enabled: !someVar },
                { text: "@Html.Raw(Resources.BtnDelete)" },
            ]
        });
    }
}

This way you can combine your static content with the dynamic one.