我有一个用javaScript渲染的Kendo UI网格。我希望字符串列有一个选项(“包含”)而没有第二个过滤器。到目前为止,我写的很好,
$("#MyGrid").kendoGrid({
// other bits of configuration here
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
// more bits of configuration here
});
作为网格定义的一部分。结果看起来很好(我只有一个选项,所以下拉是多余的)。
但是,无论如何,过滤器仍然执行equals操作而不是contains操作(这是唯一可用的操作)。
我花了一段时间试图解决这个问题并且我一直在圈子里,因为我发现的代码要么不起作用,要么没有意义,或两者兼而有之。
有谁能告诉我如何将过滤器默认为“包含”而不是“等于”?
答案 0 :(得分:10)
当您只有一个选项或者您对布局不满意时,您可以使用更高版本的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和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" }]
}
答案 1 :(得分:6)
更改实例的 所有 的默认运算符的最佳方法:
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"
}
/***************************************************************************/
});
答案 2 :(得分:5)
尝试更新到最新的内部版本。版本高于 2012.3.1304 的版本应包含修复程序。
答案 3 :(得分:5)
我遇到了同样的问题而且我得到了它,它需要 .Clear()选项!
我正在使用Razor中的MVC Wrapper构建我的网格:
@(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
)
<强>要点:强>
.Contains()
放在.Clear()
之后,然后默认为包含!其他信息: 我正在使用Kendo UI 2013.1.514
答案 4 :(得分:1)
filterable:{运营商:{号码:{gte:“大于或等于”}}}}