剣道UIグリッドのデフォルトフィルタを設定する

Question

私は剣道のUIグリッドをjavaScriptでレンダリングしています。私は、文字列が単一のオプション（ "Contains"）を持ち、2番目のフィルタを持たないようにします。これまでに非常に良い、私は書いた

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

グリッドの定義の一部として。結果はいいよね（私は1つのオプションしかないので、ドロップダウンは冗長です）。

しかし、関係なくこのフィルタは、まだ（それが利用可能な唯一のものである）の動作を含んではなく、対等の動作を行います。

私はこのアウトを理解しようとしているときを過ごしていると私は私が動作しない、または意味をなす、またはその両方ないか見つけコードための円の中を続けます。

誰もが「入って」とない「等しいがある」ためにフィルタをデフォルトにする方法を教えてもらえますか？

Answer 1

は、最新の内部ビルドに更新するようにしてください。 2012.3.1304より後のバージョンには修正が含まれているはずです。

Answer 2

オプションが1つしかない場合や、レイアウトに不満がある場合は、剣道の後のバージョンにある "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フォーマットで2つの日付のボックスを有する例である：

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バージョンでは、演算子を正しく設定して "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. ソートが必要です！ .Contains()を最初に.Clear()の後に置くと、デフォルトは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" 
    } 
/***************************************************************************/ 
});