Question

如何从Kendo网格过滤器菜单中删除操作员下拉列表？我在下面有一个下拉列表，其中包含供用户选择的值，因此在上面有一个表示等于的框是没有意义的。

Answer 1

这个问题已在Kendo论坛中得到解答： Kendo forum - Use dropdownlist in grid column filter

在其他地方之前总是在那里搜索是件好事。基本上你得到标题过滤器并隐藏下拉列表。我冒昧地修改了论坛中的小提琴，因为查找标题jquery选择器有点“cucoo”。并且您可以使用普通的kendo配置而不是手动创建组合

filterable: {
    ui: function(){ ... }
}

主要是隐藏和修改帮助。

// Find the Role filter menu.
var filterMenu = _grid.thead.find("th[data-field='roleTitle']").data("kendoFilterMenu");

filterMenu.form.find("div.k-filter-help-text").text("Select an item from the list:");
filterMenu.form.find("span.k-dropdown:first").css("display", "none");

在此处找到它： JSFiddle - Dropdown filter in kendo grid

Answer 2

我通过在构建UI时声明要调用的函数来完成我的操作。它应该比打猎课更容易。

{
   field: "Status",
   title: "Status",
   filterable: {
      extra: false,
      ui: statusFilter
   }
}


function statusFilter(element) {

    // finds the closest form so we can start manipulating things.
    var form = element.closest("form");  

    // changes the help text. (you might want to localise this)
    form.find(".k-filter-help-text:first").text("Select an item from the list:");

    // removes the dropdown list containing the operators (contains etc)
    form.find("select").remove();

    // Adds a new dropdownlist with all the options you want to select from
    element.kendoDropDownList({ ...... });

}

Answer 3

将事件添加到网格

.Events(e => e.FilterMenuInit("FilterMenuFunc"))

然后是一个javascript函数

 function FilterMenuFunc(e) {
        var grid = $("#GridName").data("kendoGrid");
        var filterMenu = $(grid.thead.find("th:not(.k-hierarchy-cell,.k-group-cell)")[5]).data("kendoFilterMenu");//5 is index of column
        try {
            filterMenu.form.find("div.k-filter-help-text").text("Please Select A Value From List.");
            filterMenu.form.find("span.k-dropdown:first").css("display", "none");
        } catch (e) {}

    }

从Kendo网格过滤器菜单中删除操作员下拉列表

3 个答案: