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

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

然而，不管怎样，过滤器仍然执行等于操作而不是包含操作（这是它唯一可用的操作）。

我花了一段时间试图解决这个问题，但我一直在兜圈子，因为我发现的代码要么不起作用，要么没有意义，或者两者兼而有之。

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

原文由 Colin Mackay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试更新到最新的内部版本。 2012.3.1304 之后的版本应该包含此修复程序。

原文由 Petur Subev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

当您只有一个选项或者您对布局不满意时，您可以使用 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 格式的日期框的示例：

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

显然，您可以根据自己的喜好进行模板化，并为日期、布尔值等创建不同的自定义过滤器——请注意，对于上面的日期版本，如果您想要正确设置运算符以对过滤器 [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" }]
   }

原文由 Matthew Erwin 发布，翻译遵循 CC BY-SA 3.0 许可协议