Как настроить параметры динамического подменю для статического меню

Question

У меня есть контекстное меню кендо, которое настраивается для отображения при каждом щелчке правой кнопкой мыши по элементам в списке кендо. В контекстном меню я хочу, чтобы у некоторых опций были опции подменю, которые должны загружаться динамически, так как они различаются в зависимости от того, на каком элементе списка был выбран щелчок. Я настроил вызов ajax, который возвращает необходимые данные. Проблема в том, что я не могу понять, как я могу назначить эти параметры подменю, чтобы при расширении подменю загружались динамические параметры.

У меня есть контекстное меню кендо, созданное в файле машинописного текста, связанном с файлом cshtml. Я попытался добавить событие open в контекстное меню кендо, внутри которого я создал хранилище данных, когда завершился вызов ajax, а затем я создал контекстное меню кендо. Недостаток - он заменяет старое меню и не служит требованием загрузки опций подменю. Еще я попробовал добавить логику в событие выбора контекстного меню, которое делает что-то похожее, но мало что делает

Код контекстного меню:

<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>

Файл машинописного текста, создание контекстного меню кендо:

$('#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
                });

Я ожидаю, что контекстное меню будет загружать статические параметры при его открытии, а затем, когда параметр с параметрами подменю будет либо перемещен, либо щелкнут по нему, в нем должны отображаться динамические параметры.

Answer 1

Я решил это, создав источник данных контекстного меню полностью динамически. Всякий раз, когда open- происходит событие ( https://docs.telerik.com/kendo-ui/api/javascript/ui/menu/events/open), я устанавливаю источник данных.

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)" },
            ]
        });
    }
}

Таким образом, вы можете комбинировать статический контент с динамическим.