Unplanned
Last Updated: 04 Nov 2022 11:18 by ADMIN
Tech
Created on: 28 Oct 2022 18:39
Category: Grid
Type: Feature Request
0
accent insensitive characters in grid filter

hi,

when filtering a column in a grid, when we type some text it searches for that text but when the column contains accented characters, we need to specify the accented character or else it will only search for normal characters.

 

Column with a mix of accented and normal characters values (subset)
REÉR
REÉÉ-F
REER-F

when typing re, I get all the above but if I type ree, I only get REER-F, I would like to get all 3 since E and É are the same search wise.

when typing re

when typing ree


1 comment
ADMIN
Georgi Denchev
Posted on: 04 Nov 2022 11:18

Hello, Tech,

Thank you for the provided details.

A similar feature has already been discussed here:

https://feedback.telerik.com/kendo-jquery-ui/1359528-ignore-diacritics-when-filtering 

My colleague has provided an approach that can be used to "transform" the accented character into a regular one by using the filter.operator as a function.

Dojo

I've prepared a Dojo which showcases how you can achieve this with the Filter Row in the Grid:

https://dojo.telerik.com/@gdenchev/Unazaqux 

          columns: [
            {
              field: "name",
              filterable: {
                cell: {
                  template: function (args) {
                     // Initialize the AutoComplete manually.
                    args.element.kendoAutoComplete({
                      dataSource: args.dataSource,
                      dataTextField: "name",
                      dataValueField: "name",
                      valuePrimitive: true,
                      filtering: (e) => { // Attach a handler to the filtering event.
                        e.filter.operator = function(item, value) {
                          // If the character that was typed in is "É" change it to regular "e".
                          if(value === "É") {
                            value = "e";
                          }
                          // Return the value.
                          return value;
                        }
                      }
                    });
                  },
                }
              }
            }
          ]

I hope the above example is helpful. I'll add a note that we can showcase this in a KB article so it has better visibility for other users that may stumble across the same problem.

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.