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

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>

    <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>