Ignore Diacritics when Filtering
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Description
I want to enable my users to filter a Grid column that contains values with diacritic characters. For example, I want to be able to search the value REÉR
by typing ree
in the filter input. How can I ignore the diacritics and search for the values as if they are regular letters?
Solution
- Use the
columns.filterable.cell.template
to initialize a custom Kendo AutoComplete component. - Attach a handler to the
filtering
event of the custom AutoComplete. - Inside the filtering event, use a custom operator to convert the diacritic character to a regular one. For example,
e
instead ofÉ
.
The following example demonstrates the full implementation of the above logic.
<h3>Type "ree" inside the filter cell and observe the result.</h3>
<div id="countries"></div>
<script>
$(document).ready(function () {
var data = [
{name: "REÉR"},
{name: "REÉÉ-F"}
];
$("#countries").kendoGrid({
dataSource: {
data: data
},
columns: [
{
field: "name",
filterable: {
cell: {
template: function (args) {
args.element.kendoAutoComplete({
dataSource: args.dataSource,
dataTextField: "name",
dataValueField: "name",
valuePrimitive: true,
filtering: (e) => {
e.filter.operator = function(item, value) {
// Replace the diacritic character with a regular one.
item = item.replace("É", "e");
// Perform the comparison (startsWith) operation manually.
return item.toLowerCase().startsWith(value);
}
}
});
},
}
}
}
],
filterable: {
mode: "row"
}
});
});
</script>