为Kendo UI Grid设置默认过滤器

Question

我有一个用javaScript呈现的Kendo UI网格。我想要字符串列有一个选项（“包含”），没有第二个过滤器。到目前为止，我写了

 $("#MyGrid").kendoGrid({ 
      // other bits of configuration here 
      filterable: { 
       extra:false, 
       operators: { 
        string:{ contains: "Contains"} 
       } 
      }, 
      // more bits of configuration here 
     }); 

作为网格定义的一部分。结果看起来很好（我只有一个选项，所以下拉是多余的）。

然而，无论此，过滤器仍然执行equals操作，而不是包含操作（这是提供给它的唯一的一个）。

我花了一段时间试图弄清楚这一点，我一直在圈子里四处走动，因为我发现的代码不起作用，或者没有意义，或两者兼而有之。

谁能告诉我如何将过滤器默认为“包含”而不是“等于”？

Answer 1

尝试更新到最新的内部版本。版本晚于2012.3.1304应包含修复程序。

Answer 2

如果您只有一个选项，或者对布局不满意，可以使用Kendo更高版本中存在的“ui：func（element）{}”重载来完全自定义过滤器控件（例如v2013.1.319）

columns : [ 
    { field: "MyCity", width: 80, title : "City", filterable: customTextFilter }, 
    { field: "CreatedAt", width: 72, title: "Created", filterable: $scope.customDateFilter } 
] 

下面是然后定制外观的功能：

var customTextFilter = 
    { 
     extra : false, 
     operators : { string : { contains : "Contains"}}, 
     ui : function(element) 
     { 
      var parent = element.parent(); 
      while(parent.children().length > 1) 
       $(parent.children()[0]).remove(); 

      parent.prepend("<input data-bind=\"value:filters[0].value\" class=\"k-textbox\" type=\"text\">"); 
     } 
    } 

在这里是具有GTE/LTE格式两个日期框的一个示例：

var customDateFilter = 
    { 
     extra : true, 
     operators : { }, 
     ui : function(element) 
     { 
      var parent = element.parent(); 
      while(parent.children().length > 1) 
       $(parent.children()[0]).remove(); 

      parent.prepend(
       "On or after:<br/><span class=\"k-widget k-datepicker k-header\">" + 
       "<span class=\"k-picker-wrap k-state-default\">" + 
       "<input data-bind=\"value:filters[0].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" + 
       " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-disabled=\"false\" " + 
       " aria-readonly=\"false\" aria-label=\"Choose a date\">" + 
       "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" + 
       "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" + 

       "<br/>On or before:<br/>" + 
       "<span class=\"k-widget k-datepicker k-header\"><span class=\"k-picker-wrap k-state-default\">" + 
       "<input data-bind=\"value: filters[1].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" + 
       " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" " + 
       " aria-disabled=\"false\" aria-readonly=\"false\" aria-label=\"Choose a date\">" + 
       "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" + 
       "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" 
      ); 
     } 
    }; 

显然你可以模板出来，不管你喜欢什么，并为Date，Boolean等创建不同的自定义过滤器 - 注意，对于上面的Date版本，如果你想正确设置操作符为“gte”和“lte”过滤[0] .operator和过滤器[1] .operator你可以只设置在dataSource.filter属性，像这样：

dataSource: { 
     transport : 
     { 
      read : function(context) 
      { 
       //note that here context.filter.filters has the array 
       //of applied filters -- you can write a custom RESTful call 
       //such as angular $http.get() or use Kendo native format to 
       //send filter options to server. 
      } 
     }, 
     //filter settings here initialize filter[0], filter[1], etc. 
     filter : [ 
      { field : "CreatedAt", operator : "gte" }, 
      { field : "CreatedAt", operator : "lte" }] 
    } 

Answer 3

我有同样的问题，我得到了它，它需要的。清除（）选项！

我建设我网与MVC包装在剃刀：

@(Html.Kendo().Grid<LocationViewModel>() 
    .Name("locationGrid") 
    // other bits of configuration here 
    .ColumnMenu() 
    .Filterable(f => f.Operators(o => o.ForString(s => s 
     .Clear() 
     .Contains("Contains") 
     .DoesNotContain("Does not contain") 
     .EndsWith("Ends with") 
    ))) 
    // other bits of configuration here 
) 

摘要：

1. .Clear（）需要！
2. 排序是必要的！在.Clear()之后先输入.Contains()，则默认为Contains！

附加信息： 我使用的剑道UI 2013.1。514

Answer 4

过滤：{操作符：{数：{GTE： “大于或等于”}}}

Answer 5

更改默认操作者为的实例的所有的最佳方式：

kendo.ui.FilterMenu.prototype.options.operators =   
    $.extend(kendo.ui.FilterMenu.prototype.options.operators, { 
    string: { 
     contains: "Contains", 
     startswith: "Starts with", 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     doesnotcontain: "Does not contain", 
     endswith: "Ends with" 
    } 
}); 

和完整的脚本：

kendo.ui.FilterMenu.prototype.options.operators =   
    $.extend(kendo.ui.FilterMenu.prototype.options.operators, { 

/* FILTER MENU OPERATORS (for each supported data type) 
****************************************************************************/ 
    string: { 
     contains: "Contains", 
     startswith: "Starts with", 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     doesnotcontain: "Does not contain", 
     endswith: "Ends with" 
    }, 
    number: { 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     gte: "Is greater than or equal to", 
     gt: "Is greater than", 
     lte: "Is less than or equal to", 
     lt: "Is less than" 
    }, 
    date: { 
     eq: "Is equal to", 
     neq: "Is not equal to", 
     gte: "Is after or equal to", 
     gt: "Is after", 
     lte: "Is before or equal to", 
     lt: "Is before" 
    }, 
    enums: { 
     eq: "Is equal to", 
     neq: "Is not equal to" 
    } 
/***************************************************************************/ 
});