如何仅从网格外部访问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选项。我需要访问列菜单功能（只能够显示/隐藏从网格外的按钮的列这个链接，我可以做到这一点，它工作正常。

$ b <但是，这仍然保留列标题中的columnMenu选项，我不需要。因此，进一步调查后，我能够删除负载上的列标题使用

defaultGrid.thead.find （[data-field = Address]>。k-header-column-menu）。remove（）;

其中Address是网格中的一列，我仍然需要atleast一列用columnMenu选项，否则上述url中的解决方案不起作用。

使用上面链接中的解决方案，它也删除了我需要实现的是从所有列标题中删除列菜单（并访问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  ds.push（{
 encoded：false，
 text： < label>< input type ='checkbox'checked ='checked'+ 
class ='check'data-field ='+ grid.columns [i] .field + 
 '/>+ grid.columns [i] .field +< / label>
}）; 
 
 $ / code> 

菜单：

<$ kendMenu（{
dataSource：[{
text：Menu，
items：ds
）pre> $ }]，
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)

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