如何为静态菜单配置动态子菜单选项

Question

我有一个剑道上下文菜单，配置为在剑道列表视图中的项目上单击鼠标右键时显示​​。在上下文菜单中，我希望某些选项具有必须动态加载的子菜单选项，因为它们根据单击列表视图的哪个项目而有所不同。我已经配置了返回所需数据的 ajax 调用。 问题是，我不知道如何将这些选项分配给子菜单，以便在展开子菜单时加载动态选项。

我在与 cshtml 文件关联的打字稿文件中创建了剑道上下文菜单。我尝试将打开事件添加到剑道上下文菜单中，我在其中创建了数据源，当 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>

Typescript 文件，剑道上下文菜单创建：

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

通过这种方式，您可以将静态内容与动态内容结合起来。