Question

我有一个kendo UI treewiew，它代表了一些目录结构和上下文菜单：

 @(Html.Kendo().ContextMenu()
    .Name("menu")
    .Target("#treeview")
    .Orientation(ContextMenuOrientation.Horizontal)
    .Animation(animation => animation.Open(open =>
    {
        open.Fade(FadeDirection.In);
        open.Duration(500);
    }))
    .Items(items =>
    {
        items.Add()
            .Text("Test");

    })
    //.Events(e=>e.Open("contextOpen"))
)


<div class="treeview-back">
    @(Html.Kendo().TreeView()
        .Name("treeview")
        .TemplateId("treeview-template")
        .Checkboxes(checkboxes => checkboxes
            .Name("checkedFiles")
            .CheckChildren(true)
        )
        .Events(events => events
            .Check("onCheck")
        )
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
        .Model(m => m.Id("Path").HasChildren("HasChildren"))
        .Read("ReadDirectory", "Download"))   
    )

我只需要为表示文件夹的元素显示上下文菜单。但我找不到按条件显示kendo上下文菜单的方法。我添加了右键单击捕获方法，如下所示：

$("#treeview").on('mousedown', '.k-item', function (event) {
            var treeView = $('#treeview').data('kendoTreeView');
            var dataSource = treeView.dataSource;
            var itemUId = $(this).attr("data-uid");
            var node = dataSource.getByUid(itemUId);
            if (event.which === 3 && node.hasChildren) {
                event.stopPropagation(); // to avoid propagation of this event to the root of the treeview
                $('#treeview').data('kendoTreeView').select(this);
                ...//here I should prevent context menu from showing somehow
            }
        });

但我无法找到取消上下文菜单显示的方法。我还尝试将open事件添加到上下文菜单中，但我无法在那里获取所选项目。提前谢谢。

Answer 1

要显示由于条件而导致的菜单使用ContextMenu对象的过滤器属性：

@(Html.Kendo().ContextMenu()
    .Name("menu")
    .Filter(".menu-on")
)

它仅显示具有类menu-on的项目的菜单。

其次，您必须将此类添加到所有文件夹中。您应该通过javascript找到树中的所有<span class="k-in">元素，并将menu-on类添加到与文件夹关联的所有元素。

按条件显示kendo UI树视图的上下文菜单

1 个答案: