javascript KendoUI Grid 自定义过滤器 UI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15061501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
KendoUI Grid Custom Filter UI
提问by imperium2335
I am trying to implement a custom filter UI with a drop down box with some dummy data for now. I have followed the tutorial on the Kendo site (http://demos.kendoui.com/web/grid/filter-menu-customization.html) but it just isn't working for me :(.
我现在正在尝试使用带有一些虚拟数据的下拉框来实现自定义过滤器 UI。我已经按照 Kendo 网站 ( http://demos.kendoui.com/web/grid/filter-menu-customization.html)上的教程进行操作，但它对我不起作用:(。
Here is the function for the custom UI:
这是自定义 UI 的功能：
function relStatFilter(element)
{
element.kendoDropDownList({
dataSource: ["Prospect", "Customer"],
optionLabel: 'Select status'
})
}
And here is the column parameters it's being applied to:
这是它应用于的列参数：
...
{
field: 'relStat',
filterable:
{
ui: relStatFilter,
extra: false
},
title: '<abbr title=\'Relationship status\'>Rel stat</abbr>',
template: '#= ratio == 0 ? "<span class=text-info>Prospect</span>" : relStat == "Active" ? "<span class=text-success>Active</span>" : relStat == "At risk" ? "<span class=text-warning>At risk</span>" : "" #',
},
...
When I click the filter all I get is the standard "starts with" and the text input.
当我点击过滤器时，我得到的只是标准的“开始于”和文本输入。
What have I missed?
我错过了什么？
回答by Atanas Korchev
Custom filtering UI is available since 2012.3.1315. Make sure you are not using an older version. Using 2012.3.1315 the following code works as expected:
自 2012.3.1315 起提供自定义过滤 UI。确保您没有使用旧版本。使用 2012.3.1315 以下代码按预期工作：
$("#grid").kendoGrid({
dataSource: [ { name: "Foo" }, { name: "Bar" }],
filterable: {
extra: false,
operators: {
string: {
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
columns: [
{
field: "name",
filterable: {
ui: function(element) {
element.kendoDropDownList({
dataSource: [ "Foo", "Bar"]
});
}
}
}
]
});
Here is a live demo: http://jsbin.com/uwiqow/1/edit
这是一个现场演示：http: //jsbin.com/uwiqow/1/edit
