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 (.html) but it just isn't working for me :(.
Here is the function for the custom 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?
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./web/grid/filter-menu-customization.html) but it just isn't working for me :(.
Here is the function for the custom 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?
Share Improve this question asked Feb 25, 2013 at 6:47 imperium2335imperium2335 24.1k38 gold badges116 silver badges194 bronze badges1 Answer
Reset to default 5Custom 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:
$("#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./uwiqow/1/edit