对于剑道UI网格设置默认过滤器(Set default filter for Kendo UI Gr

2019-07-18 04:48发布

我有一个渲染使用JavaScript剑道UI格。 我希望字符串列有一个选项(“包含”),并没有第二个过滤器。 到目前为止好,我写

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

随着电网的定义的一部分。 而结果看起来不错-ISH(我只有一个选项,因此下拉是多余的)。

然而,无论此,过滤器仍然执行equals操作,而不是包含操作(其仅提供给它的一个)。

我花了一段时间试图弄清楚了这一点,因为我的代码中发现要么不工作,我一直兜兜转转,还是没有意义,或两者兼而有之。

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

Answer 1:

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



Answer 2:

当只有一个单独的选项或不满意的布局可以完全自主使用滤波器控制“UI:函数(元件){}”过载,其存在于剑道的更新版本(例如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>"
            );
        }
    };

很明显,你可以从模板但是你喜欢和创建日期,布尔等不同的自定义过滤器 - 注意,在最新版本,如果你要正确设置经营者说:“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:

更改默认操作所有实例的最佳方式:

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


Answer 4:

我有同样的问题,我得到了它,它需要的.Clear()选项!

我建立我与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()则默认为包含!

附加信息:我使用的剑道UI 2013.1.514



Answer 5:

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



文章来源: Set default filter for Kendo UI Grid