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

本文介绍了如何仅从网格外部访问Kendo Grid的列菜单，并为列标题中的特定列添加过滤器选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我是Kendo Grid的新手，尝试使用columnMenu选项。我需要访问列菜单功能（只能够显示/隐藏从网格外的按钮的列这个链接，我可以做到这一点，它工作正常。

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

这是可能的，我该怎么做呢？请帮忙解决方案

不知道我的要求是正确的，但是像这样的应该工作：

JS：

var grid = $（＃grid）。kendoGrid（{ dataSource：[{ foo：foo， bar：bar}]，可过滤：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。留下}）; $（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>显示foo菜单< / button> < button class ='grid-menu'data-field =bar>显示栏菜单< / button> < / div>

（

$ b

Grid：

var grid = $（＃grid）。kendoGrid（{ b $ b dataSource：[{ foo：foo， bar：bar}]，可过滤：true， columnMenu：false }）。getKendoGrid（）;

从grid.columns创建菜单项：

var ds = []; for（var i = 0，max = grid.columns.length; i

菜单： $ }]， openOnClick：true， closeOnClick：false， open：function（）{ var selector; //取消隐藏列 $ .each（grid.columns，function（）{ if（this.hidden）{ selector =input [data-field ='+ this.field +']; $（selector）.prop（checked，false）; } }）; }， select：function（e）{ // （$（e.item）.parent（）。filter（div）.length）return; var input = $（e .item）.find（input.check）; var field = $（input）.data（field）; $ b $ if（$（input）.is（：checked） ）{ grid.showColumn（field）; } else { grid.hid eColumn（场）; } } }）;

（ demo ）

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)