[英]Set default filter for Kendo UI Grid
我有一個用javaScript渲染的Kendo UI網格。 我希望字符串列有一個選項(“包含”)而沒有第二個過濾器。 到目前為止,這么好,我寫道
$("#MyGrid").kendoGrid({
// other bits of configuration here
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
// more bits of configuration here
});
作為網格定義的一部分。 結果看起來很好(我只有一個選項,所以下拉是多余的)。
但是,無論如何,過濾器仍然執行equals操作而不是contains操作(這是唯一可用的操作)。
我花了一段時間試圖解決這個問題,並且我一直在圈子里走,因為我發現的代碼要么不起作用,要么沒有意義,或者兩者兼而有之。
任何人都可以告訴我如何將過濾器默認為“包含”而不是“等於”?
當您只有一個選項或者您對布局不滿意時,可以使用更高版本的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版本,如果要正確設置運算符,請為過濾器[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" }]
}
嘗試更新到最新的內部版本。 2012.3.1304之后的版本應該包含修復程序。
更改所有實例的默認運算符的最佳方法:
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"
}
/***************************************************************************/
});
我有同樣的問題,我得到它,它需要.Clear()選項!
我正在使用Razor中的MVC Wrapper構建我的Grid:
@(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
可過濾:{運營商:{號碼:{gte:“大於或等於”}}}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.