删除Kendo-grid Row Filter中的第二个清除按钮

Question

从2017年的Kendo-UI开始，我注意到行过滤器现在显示两个“x”按钮来清除过滤器（一个在文本框内，另一个在文本框右侧）。为什么有两个而不是只有一个像旧版本？更重要的是， 是否有设置从文本框内删除清除按钮而不使用CSS？

$("#grid").kendoGrid({
    columns: [
        {
            field: "name",
            filterable: {
                cell: {
                    showOperators: false,
                    operator: "contains"
                }
            }
        },
        { field: "age", filterable: false }],
    filterable: { mode: "row" },
    dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

<div id="grid"></div>

Answer 1

用于过滤的AutoComplete小部件应该受到指责。我最后还是用CSS来隐藏它：

.k-clear-value {
    display: none !important;
}

但JavaScript的答案是将以下内容放在dataBound event：

中

this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();

以下是更新后的代码：

$("#grid").kendoGrid({
    columns: [
        {
            field: "name",
            filterable: {
                cell: {
                    showOperators: false,
                    operator: "contains"
                }
            }
        },
        { field: "age", filterable: false }],
    filterable: { mode: "row" },
    dataBound: function(e) {
        this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
    },
    dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

<div id="grid"></div>

Source