KendoUI Grid Custom Filter UI
10,991
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:
$("#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
Related videos on Youtube
Comments
-
imperium2335 over 1 year
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 :(.
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?
-
imperium2335 about 11 yearsThanks, I couldn't find where to download that version but I just took the code they use in their examples and it works perfectly.