Question

我是Kendo Grid的新手，并尝试使用columnMenu选项。我需要访问列菜单功能（只能显示/隐藏网格外按钮的列。这个链接允许我这样做，它工作正常。 How to show Kendo Grid's columnMenu using script

但是这仍然保留了我不需要的列标题中的columnMenu选项。因此，在进一步研究之后，我能够使用
来删除负载上的列标题 defaultGrid.thead.find（ “[数据字段=地址] GT; .K头列菜单”）。除去（）;
其中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>

（demo）

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

网格：

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);
        }
    }
});

（demo）

Answer 2

这是一个非常古老的主题，但在搜索类似的东西之后，我在Terlerik论坛中发现了一个帖子，用户引用了“kendoColumnMenu”。因为我可以说这是没有证件的。

它还显示了如何在为保存网格状态或您选择的其他配置选项而创建的菜单中添加其他选项。

以下是该帖子的链接，其中还包含DOJO的链接，其中包含以下工作代码：Click Here

希望这有助于其他人搜索此内容。

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

2 个答案: