如何仅从网格外部访问Kendo Grid的列菜单,并为列标题中的特定列添加过滤器选项

Question

我是Kendo Grid的新手,并尝试使用columnMenu选项.我需要访问列菜单功能(只能显示/隐藏网格外按钮的列.这个链接允许我这样做,它工作正常. 如何使用脚本显示Kendo Grid的columnMenu

但是这仍然保留了我不需要的列标题中的columnMenu选项.所以在进一步研究之后,我能够使用
defaultGrid.thead.find("[data-field = Address]>.k-header-column-menu")删除加载上的列标题.remove();
其中Address是网格中的一列.我仍然需要使用columnMenu选项至少有一列,否则上面url中的解决方案不起作用.

使用上面链接中的解决方案,它还会删除列上的过滤器选项.我需要实现的是从所有列标题中删除列菜单(并从网格外部访问显示/隐藏列选项),并且还有网格的特定列可用的过滤器选项

这是可能的,我该怎么做呢？请帮忙

Answer 1

不确定我的所有要求是否正确,但是这样的事情应该有效:

JS:

var grid = $("#grid").kendoGrid({
    dataSource: [{
        foo: "foo",
        bar: "bar"
    }],
    filterable: true,
    columnMenu: true
}).getKendoGrid();

function showMenu() {
    var offset = $(this).offset();
    var fieldName = $(this).data("field");
    var th = $(grid.thead).find("th[data-field='" + fieldName + "']");

    $(th).find(".k-header-column-menu:first").click();
    $(".k-column-menu").parent().css({
        top: offset.top + $(this).outerHeight(),
        left: offset.left
    });
}

$(document).on("click", ".grid-menu", showMenu);

CSS:

.k-header-column-menu {
    visibility: hidden
}

HTML:

<div id='grid'></div>
<div>
    <button class='grid-menu' data-field="foo">Show foo menu</button>
    <button class='grid-menu' data-field="bar">Show bar menu</button>
</div>

(演示)

另一种方法是只显示带有复选框的菜单,同时将过滤器菜单保留在网格标题中:

网格:

var grid = $("#grid").kendoGrid({
    dataSource: [{
        foo: "foo",
        bar: "bar"
    }],
    filterable: true,
    columnMenu: false
}).getKendoGrid();

从grid.columns创建菜单项:

var ds = [];
for (var i = 0, max = grid.columns.length; i < max; i++) {
    ds.push({
        encoded: false,
        text: "<label><input type='checkbox' checked='checked' " +
              " class='check' data-field='" + grid.columns[i].field + 
              "'/>" + grid.columns[i].field + "</label>"
    });
}

菜单:

$("#menu").kendoMenu({
    dataSource: [{
        text: "Menu",
        items: ds
    }],
    openOnClick: true,
    closeOnClick: false,
    open: function () {
        var selector;
        // deselect hidden columns
        $.each(grid.columns, function () {
            if (this.hidden) {
                selector = "input[data-field='" + this.field + "']";
                $(selector).prop("checked", false);
            }
        });
    },
    select: function (e) {
        // ignore click on top-level menu button
        if ($(e.item).parent().filter("div").length) return;

        var input = $(e.item).find("input.check");
        var field = $(input).data("field");
        if ($(input).is(":checked")) {
            grid.showColumn(field);
        } else {
            grid.hideColumn(field);
        }
    }
});

(演示)