This is a migrated thread and some comments may be shown as answers.

DropDownTree, local data and diacritics filtering

18 Answers 128 Views
DropDownTree
This is a migrated thread and some comments may be shown as answers.
Luc
Top achievements
Rank 1
Luc asked on 03 Apr 2020, 01:35 PM

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!

 

18 Answers, 1 is accepted

Sort by
0
Luc
Top achievements
Rank 1
answered on 03 Apr 2020, 01:38 PM
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.
0
Plamen
Telerik team
answered on 08 Apr 2020, 01:06 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Luc
Top achievements
Rank 1
answered on 08 Apr 2020, 02:55 PM

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!

0
Plamen
Telerik team
answered on 09 Apr 2020, 01:20 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Luc
Top achievements
Rank 1
answered on 14 Apr 2020, 05:29 AM
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...
0
Plamen
Telerik team
answered on 15 Apr 2020, 12:15 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Luc
Top achievements
Rank 1
answered on 16 Apr 2020, 09:31 AM

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

0
Plamen
Telerik team
answered on 17 Apr 2020, 10:16 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Luc
Top achievements
Rank 1
answered on 20 Apr 2020, 04:58 AM

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

 

Thanks

0
Plamen
Telerik team
answered on 21 Apr 2020, 06:51 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Luc
Top achievements
Rank 1
answered on 21 Apr 2020, 01:40 PM

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.

0
Accepted
Plamen
Telerik team
answered on 22 Apr 2020, 04:35 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Luc
Top achievements
Rank 1
answered on 22 Apr 2020, 09:02 AM

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?

0
Luc
Top achievements
Rank 1
answered on 22 Apr 2020, 10:56 AM

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!

0
Plamen
Telerik team
answered on 24 Apr 2020, 10:14 AM

Hello,

Thank you for providing further information.

Regards,
Plamen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
saad
Top achievements
Rank 1
answered on 22 Mar 2021, 02:51 PM

Hello,

Is this scenario not yet supported?

Thanks

0
Ianko
Telerik team
answered on 25 Mar 2021, 10:22 AM

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

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.

0
saad
Top achievements
Rank 1
answered on 01 Apr 2021, 01:17 PM
Thanks  Lanko
Tags
DropDownTree
Asked by
Luc
Top achievements
Rank 1
Answers by
Luc
Top achievements
Rank 1
Plamen
Telerik team
saad
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or