web-dev-qa-db-ja.com

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

JavaScriptでレンダリングされたKendoUIグリッドがあります。文字列列に単一のオプション（「含む」）があり、2番目のフィルターがないようにしたい。これまでのところ良い、私は書いた

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

グリッドの定義の一部として。そして、結果は見栄えがします（オプションが1つしかないため、ドロップダウンは冗長です）。

Filter as I defined

ただし、これに関係なく、フィルターは、contains操作（使用可能な唯一の操作）ではなく、equals操作を実行します。

私はこれを理解しようとしばらく時間を費やしましたが、見つけたコードが機能しないか、意味がないか、またはその両方であるため、円を描いて回り続けています。

フィルタを「IsEqualTo」ではなく「Contains」にデフォルト設定する方法を教えてもらえますか？

javascriptkendo-uikendo-grid
9
Colin Mackay

最新の内部ビルドに更新してみてください。 2012.3.1304以降のバージョンには修正が含まれている必要があります。

6
Petur Subev

オプションが1つしかない場合、またはレイアウトに満足できない場合は、Kendoの新しいバージョン（v2013.1.319など）に存在する「ui：func（element）{}」オーバーロードを使用してフィルターコントロールを完全にカスタマイズできます。

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

もちろん、好きなようにテンプレートを作成して、日付、ブール値などのさまざまなカスタムフィルターを作成できます。上記の日付バージョンでは、filter [0]の演算子を「gte」と「lte」に正しく設定する場合は注意してください。 .operatorおよびfilter [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" }]
   }
10
Matthew Erwin

インスタンスのallのデフォルト演算子を変更する最良の方法：

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

同じ問題が発生しましたが、。Clear（）オプションが必要です。

Razorの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！です。

追加情報：剣道UI2013.1.514を使用しています

5
florian.isopp

フィルター可能：{演算子：{数：{gte： "以上"}}}

1
Brono The Vibrator