DropDownTree, local data and diacritics filtering

[Luc]

Hello,

I'm working with a DropDownTree which I create with the following code:

01.@(Html.Kendo().DropDownTree()
02.    .Name("selectJobs")
03.    .DataValueField("id")
04.    .DataTextField("text")
05.    .HtmlAttributes(new
06.    {
07.        @class = "form-control"
08.    })
09.    .Filter(FilterType.Contains)
10.    .LoadOnDemand(false).MinLength(2)
11.    .BindTo((IEnumerable<DropDownTreeItemModel>)ViewBag.inlineDefault)
12.    .Events(e => e.Change("onJobChanged").DataBound("onJobDataBound"))
13.    .Template("#= autocompleteFormatValue(data.item.text, 'selectJobsFilter') #")
14.)

There is a way to change the content data of this tree, through an ajax call and when it completes, the following code is exeuted:

01.function (response) {
02.    var ds = new kendo.data.HierarchicalDataSource({
03.        data: response,
04.        accentFoldingFiltering: "fr-FR"
05.    });
06.    var dropdowntree = $('#selectJobs').data('kendoDropDownTree');
07.    dropdowntree.setDataSource(ds);
08.    dropdowntree.treeview.expand(".k-item");
09.}

I believe I am using the 'accentFoldingFiltering' option properly, as per https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/accentfoldingfiltering

Yet, the diacritics filtering is not working. Any idea what is missing ?

For instance I would have the items you can see on my example1.png picture. And so I would expect that if I pressed e, which I do in example2.png, then I would see all the items that match "matie" including "matiè" but as you can see that's not the case.

Thanks!

 

[Luc]

by the way, I realize I am using a template for my dropdowntree, and the issue also occurs when I'm not using the template.

[Plamen]

Hello,

One possible way to approach this scenario is to try using directly the string that you set to the accentFoldingFiltering as for example in the code below so that the string that is searching from the treeview is correctly taken from the input:

function onFiltering(e) {
                        e.filter.value = e.filter.value.toLocaleString("fr-FR");
                    }

Hope this will help you solve the issue. If it still doesn't work please provide some more details so we could inspect the issue at our side - the exact filter and the text of the item that is not filtered correctly.

Regards,
Plamen
Progress Telerik

[Luc]

Hello,

it does not work, here is a dojo that show cases the problem:

https://dojo.telerik.com/UTIyiZeG/3

Thanks for any further information!

[Plamen]

Hi,

I have simplified a little bit the dojo (https://dojo.telerik.com/@zdravkov/EbUPohuY) and tested it at my side but it worked correctly when I test with French keyboard. I am attaching a gif with my test. Please review it and let me know if you are testing some other case or the desired behavior is somehow different so we could inspect it once again and be more helpful.

Regards,
Plamen
Progress Telerik

[Luc]

that's not an example of it working correctly, that's exactly the behaviour you see in my example. I want the search to be insensitive to accents (diacritics). So in your example, you should be able to type "él" and "el" and you should get the same results...

[Plamen]

Hello,

Thank you for elaborating the issue - unfortunately such search that will find the result in all languages is not supported at the moment. As it is described in this in the accentFoldingFiltering documentation - 'Due to the specifics of the case-insensitive search, only one language can be used to filter your data. For example, if you mix English and Turkish in the data, you may observe unexpected behavior.'

Please excuse us for this limitation of our component. If you have further questions please let me know.

Regards,
Plamen
Progress Telerik

[Luc]

yes that's fine for our use case! our component only have items displayed in the same language, so it will always contain stuff in the language the GUI is displayed. So how do I get this to work properly for 1 language? this is what I've been trying to do and it's not working. Can you adapt the dojo sample so that it works for french ? 

 

Thanks

[Plamen]

Hello,

It seems like I could not explain correctly - please excuse me for that.

The purpose of the accentFoldingFiltering option is to allow DataSource to find the exact diacritic character. For example to find only ó, but not  ò or o.

 

Having the same search result for different letters is not a supported scenario.

Regards,
Plamen
Progress Telerik

[Luc]

In that case, is there a way to override the filtering functionality for this component, so that I can implement the behavior myself?

 

Thanks

[Plamen]

Hi,

Yes - you can prevent the default filtering client event and filter the dataSource with a new custom filter as for example it is done in this dojo - https://dojo.telerik.com/@zdravkov/EbUPohuY.

In the concrete scenario we need to find if we use the concrete character in the value of the current filter - if it is used we need to create and accent map and and create custom filter against the corresponding values.

Hope this information will be helpful.

Regards,
Plamen
Progress Telerik

[Luc]

Thanks for the answer!

 

so if I understood correctly, you are suggesting to do something like this: https://dojo.telerik.com/iNAPeMip/2

 

I think this is what I will go with for now.

Thanks.

[Plamen]

Hi,

Yes that was the idea. Thank you for your concern with Telerik and for sharing your solution with the community.

Regards,
Plamen
Progress Telerik

[Luc]

One more thing. Originally I wanted to remove all accents from the search terms and the list, instead of generating all the possibilities. Because myFilters will grow exponentially if you have more than one letter that can have an accent in the search term.

Ideally, I wanted to use normalize("NFD").replace(/[\u0300-\u036f]/g, "") on the search term and on the list, but only for the filtering logic, the user still needs to see the accents, and just do the filtering on that. Is that possible?

[Luc]

I found a way to do it. I use the Value field of the DropDownTreeItemModel to store the normalized version of the string, because I don't use this field anyway, and then I force to perform the filtering on the value field, and I use normalize("NFD").replace(/[\u0300-\u036f]/g, "") on my input, and the problem is solved in a clean way.

Thanks a lot for the collaboration on this issue!

[Plamen]

Hello,

Thank you for providing further information.

Regards,
Plamen
Progress Telerik

[saad]

Hello,

Is this scenario not yet supported?

Thanks

[Ianko]

Hi Saad,

The thread here discusses customized diacritic filtering. If you are referring to DataSource's built-in diacritic filtering you can refer to this article: https://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#accent-folding. This feature is available since R1 2019. 

If you have further questions about DataSource's feature on diacritic filtering, please open a new thread or send us a support ticket with your questions. 

Regards,
Ianko
Progress Telerik

[saad]

Thanks  Lanko