Question

我有一个kendo上下文菜单，该菜单配置为在kendo列表视图中的项目上单击鼠标右键时显示。在上下文菜单中，我希望某些选项具有子菜单选项，这些子菜单选项必须根据要单击的ListView的不同而动态加载。我已经配置了返回所需数据的ajax调用。问题是，我无法弄清楚如何将这些选项分配给子菜单，以便在扩展子菜单时加载动态选项。

我在与cshtml文件关联的打字稿文件中创建了kendo上下文菜单。我尝试将open事件添加到kendo上下文菜单中，当ajax调用完成时，我在其中创建了数据源，然后创建了kendo上下文菜单。缺点-它替代了旧菜单，并且无法满足加载子菜单选项的要求。我尝试做的另一件事是，在上下文菜单的select事件中添加执行类似操作但没有太大作用的逻辑

上下文菜单代码：

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

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

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

1 个答案: