爲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" 
    } 
/***************************************************************************/ 
});