如何仅从网格外部访问 Kendo Grid 的列菜单并为列标题中的特定列添加过滤选项 [英] How to access Kendo Grid's column menu only from outside the grid and add the filter option for specific columns in the column header

问题描述

我是 Kendo Grid 的新手，正在尝试使用 columnMenu 选项.我需要访问列菜单功能(只能通过网格外的按钮显示/隐藏列.此链接允许我执行此操作并且工作正常.如何使用脚本显示Kendo Grid的columnMenu

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

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

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

解决方案

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

JS:

var grid = $("#grid").kendoGrid({数据源: [{富:富"，酒吧:酒吧"}],可过滤:真实，列菜单:真}).getKendoGrid();功能显示菜单(){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({顶部:offset.top + $(this).outerHeight(),左:偏移量.左});}$(document).on("click", ".grid-menu", showMenu);

CSS:

.k-header-column-menu {可见性:隐藏}

HTML:

<div><button class='grid-menu' data-field="foo">显示 foo 菜单</button><button class='grid-menu' data-field="bar">显示栏菜单</button>

(演示)

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

网格:

var grid = $("#grid").kendoGrid({数据源: [{富:富"，酒吧:酒吧"}],可过滤:真实，列菜单:假}).getKendoGrid();

从 grid.columns 创建菜单项:

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

菜单:

$("#menu").kendoMenu({数据源: [{文字:菜单"，项目:ds}],openOnClick: 真,关闭点击:假，打开:函数(){var 选择器；//取消选择隐藏列$.each(grid.columns, function () {如果(this.hidden){selector = "input[data-field='" + this.field + "']";$(selector).prop("checked", false);}});},选择:功能(e){//忽略对顶级菜单按钮的点击如果 ($(e.item).parent().filter("div").length) 返回；var input = $(e.item).find("input.check");var field = $(input).data("field");if ($(input).is(":checked")) {grid.showColumn(字段)；} 别的 {grid.hideColumn(field);}}});

(演示)

I am new to Kendo Grid and trying to use the columnMenu option. I need to access the column Menu function (only the ability to show/hide columns from a button outside the grid. This link allows me to do that and it is working fine. How to show Kendo Grid's columnMenu using script

But this still retains the columnMenu option in the column headers which I do not need. So after looking into it further, I was able to remove the column headers on the load using
defaultGrid.thead.find("[data-field=Address]>.k-header-column-menu").remove();
where Address is one of the columns in the grid. I still do need to have atleast one column with the columnMenu option, or else the solution in the above url does not work.

Using the solution in the link above, it also removes the filter option on the columns. What I need to achieve is remove the Column Menu from all the column headers (and access the show/hide column option from outside the grid) and also have the filter option available to specific columns of the grid

Is this possible and how do I go about doing it? Please help

解决方案

Not sure I got all requirements right, but something like this should work:

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)

Another approach for just showing a menu with checkboxes while keeping the filter menu in the grid header:

Grid:

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

Create menu entries from 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:

$("#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)

这篇关于如何仅从网格外部访问 Kendo Grid 的列菜单并为列标题中的特定列添加过滤选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！