在Kendo网格行过滤器中删除第二个清除按钮

Question

从Kendo-2017开始，我注意到行过滤器现在显示两个“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

自动完成插件用于滤波是罪魁祸首。我结束了使用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