New to Kendo UI for jQuery? Download free 30-day trial

Ignore Diacritics when Filtering


Product Progress Kendo UI Grid


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?


  1. Use the columns.filterable.cell.template to initialize a custom Kendo AutoComplete component.
  2. Attach a handler to the filtering event of the custom AutoComplete.
  3. 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>

      $(document).ready(function () {
        var data = [
          {name: "REÉR"},
          {name: "REÉÉ-F"}


          dataSource: {
            data: data
          columns: [
              field: "name",
              filterable: {
                cell: {
                  template: function (args) {
                      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"
In this article