TreeList - Column Search issue

[Viorel]

I see there are some issues with TreeList search functionality, even on your website:

Filter Row in jQuery TreeList Widget Demo | Kendo UI for jQuery (telerik.com)

if you go on the Last Name column and switch it to "contains" and type rr, which should match a child with the value Carr, the dropdown shows no suggestions, if you actually filter it, it will filter (considering it's local filtering)

Same applies for "ends with" i tried both rr - should match Carr and ey - should match Sweeney

Am I missing something here ?

If not, is there any way to disable the suggestion dropdown ?

Thanks,

Viorel

[Neli]

Hello Viorel,

The observed issue is due to the component used for displaying the possible values is a Kendo AutoComplete and the configured filter for the AutoComplete is "startsWidth". 

If you need to change the default filter you can get a reference to the respective AutoCompete and change the configured filter operator as demonstrated below:

$('input[title="Last Name"]').data('kendoAutoComplete').options.filter = "contains"

If you need to change the filter based on the selected option when the filter button is clicked, you can bind a click event handler to the button and then to the '<li>' elements in it. Next, you can check the text of the selected element and use it to change the AutoComplete filter. Below is an example where the approach is demonstrated for some of the filter options:

 $('.k-dropdownlist[aria-label="Last Name"]').on('click', function(){

            $('.k-animation-container .k-list-item').on('click', function(ev){
              let selected = $(this).text();
              let filter = '';

              switch(selected){
                case 'Starts with': filter = 'startswith'; break;
                case 'Contains': filter = 'contains'; break;
                case 'Ends with': filter = 'endswith'; break;
                case 'Is equal to': filter = 'eq'; break;
                default: filter = 'startswith'
              }

              $('input[title="Last Name"]').data('kendoAutoComplete').options.filter = filter              
            })
 })

Here is a dojo where the snippet from above is used. 

Take a look at the provided example and let me know in case you have additional questions. 

Regards,

Neli
Progress Telerik