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

Combo filter

7 Answers 44 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Salim
Top achievements
Rank 1
Salim asked on 15 May 2018, 07:15 AM
Combo filter operator is “start with” but I need it as a contains
e.g.: if I write hockey in the below example the combo will not select any value
https://plnkr.co/edit/?p=preview

I know there’s a filter option and a filterChange event  but I want the combo behavior to be as it is now ( to see all the items and position to the selected data )

7 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 16 May 2018, 11:35 AM
Hi Salim,

It looks like the provided sample plunker did not make it through to us. 

I believe that the referenced example is from the following article:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/#toc-basic-usage

If that is the correct example, this is the default behavior of the ComboBox and customizing it is not supported. Indeed, the only way to modify the filtering functionality would be by using the filter option and handling the filterChange event.

Let me know in case I am missing something or further assistance is required for the built in features of Kendo Ui for Angular.

Regards,
Svetlin
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Salim
Top achievements
Rank 1
answered on 17 Jul 2018, 11:34 AM
Yes it’s the example referenced in the link.
I don’t want to change the combo data source all I need is to select the item that meet the filter
Is there a way to do this ?
0
Dimiter Topalov
Telerik team
answered on 18 Jul 2018, 03:12 PM
Hi Salim,

You can turn on the built-in suggestions functionality of the ComboBox via setting the "suggestions" option to true:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/suggestions/

I hope this helps, but if this is not the functionality you are looking for, please describe the desired behavior as a sequence of user actions and the expected outcome, so I can try providing a more suitable suggestion, if one is available. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Salim
Top achievements
Rank 1
answered on 19 Jul 2018, 05:42 AM
This is not the functionality that I want. What I want to do is :
Searching for any word that might occur in the combo items,
so let’s say I have in my combo “allergy to avocado” when I write inside the combo avocado I want to point to the items that contains the avocado word in.
Similar to the current default combo behavior but not only to find by the first letter in the items but also to be able to search for all available text
0
Dimiter Topalov
Telerik team
answered on 20 Jul 2018, 02:16 PM
Hi Salim,

Thank you for the clarification. The desired functionality is not supported out-of-the-box, but can be achieved via some custom implementation, based on an item template and comparing the value, typed by the user to the text content of each data item. If the typed value is a substring of the data item's text value, you can add a custom class to the template to indicate that the respective item is a match.

Here is a sample implementation of the described approach:

https://next.plnkr.co/edit/haudWoYEo9sAxVkw

Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Salim
Top achievements
Rank 1
answered on 23 Jul 2018, 07:55 AM
Thanks a lot for your help.
The solution you proposed only styles the items,
But what about scrolling to the matching item as in this link

https://plnkr.co/edit/GBOyy4N3p1a5MDKMehCU?p=preview

Try to search for 8 , the user will not be able to see the result of his search
How can I implement such functionality
0
Accepted
Dimiter Topalov
Telerik team
answered on 25 Jul 2018, 07:11 AM
Hello Salim,

The first item that matches the search (and thus receives the custom "highlight" class) can be scrolled into view via the JavaScript DOM API scrollIntoView() method. You can use the ComboBox open event handler to query the DOM for this element and scroll it into view, e.g.:

https://plnkr.co/edit/wrZKpKQaCWyUu6c9ylt4?p=preview

I hope the adjusted example matches the requirements better, but please note that custom implementation or feature customization of component functionalities that are not supported out-of-the-box, fall outside of the scope of our support service and are typically in the hands of the developer.

Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Salim
Top achievements
Rank 1
Answers by
Svet
Telerik team
Salim
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or