5

我是 Kendo Grid 的新手，正在尝试使用 columnMenu 选项。我需要访问列菜单功能（仅能够从网格外的按钮显示/隐藏列。此链接允许我这样做并且工作正常。 如何使用脚本显示 Kendo Grid 的 columnMenu

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

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

这可能吗？我该怎么做？请帮忙

4

2 回答 2

18

不确定我是否满足所有要求，但这样的事情应该可行：

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

（演示）

于 2014-04-24T19:27:42.743 回答
0

这是一个相当古老的线程，但在搜索了类似的东西后，我在 Terlerik 论坛上发现了一个帖子，其中用户引用了“kendoColumnMenu”。据我所知，这是无证的。

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

这是帖子的链接，其中还包含带有工作代码的 DOJO 链接：单击此处

希望这会帮助其他人寻找这个。

于 2017-01-05T17:45:54.330 回答